@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500|Playfair+Display:400i|Roboto:100,300&display=swap');
/* ----------------------------------------------------------------------------------------------------
  reset
* --------------------------------------------------------------------------------------------------*/
/*====================================
RESET
======================================*/
html{overflow-y: scroll;}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
blockquote, q {
    quotes:none;
}
h1, h2, h3, h4, h5, h6 {margin:0; font-weight:normal; display:block; font-size: 100%;}
p {margin:0; display:block; font-size: 100%;}

ul,li {list-style:none; padding:0;margin:0;}
dl,dt,dd {padding:0; margin:0;}
table,tr,td {border:0;padding: 0 ; margin:0;}
table {
    border-collapse:collapse;
    border-spacing:0;
}
a {
  text-decoration:none;
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
a:focus {
  outline:none;
  cursor: pointer;
}
a:hover {cursor: pointer;}

input, textarea, select {
    vertical-align:middle;
}
button{
     background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

img {vertical-align:bottom; border:0; padding:0; margin:0;line-height:0; }
div {margin:0;padding:0;}

caption, th{
    font-weight: normal;
}


input,select,button,textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	border: none;
	border-radius: 0;
	padding: 0;
	font-family:inherit;font-size:inherit;font-weight:inherit;
}

*,*:after,*:before{
	box-sizing: border-box;
}



/* ----------------------------------------------------------------------------------------------------
*  基本
* --------------------------------------------------------------------------------------------------*/
html,body{
	height:100%;
	width:100%;
}
main{

}
html{
	font-size:62.5%;
    overflow-y: scroll;
}
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form {
	text-align: left;
}
ul{letter-spacing: -0.4em;}
.android ul{letter-spacing: -1em;}
ul li{letter-spacing: normal;}


body a {
	text-decoration:none;
	color:inherit;
}
body{
	-webkit-text-size-adjust: 100%;
	width: 100%;
	font-size: 1.3rem;
	line-height: 1.6;
    font-family:'Noto Sans JP', sans-serif;
    font-weight: 300;
	color: #333;
	word-wrap: break-word;
	letter-spacing: 0.1em;
}
.en{
	font-family: 'Playfair Display', serif;
}
.mincho{
	font-family: '游明朝','Yu Mincho','游明朝体','YuMincho','ヒラギノ明朝 Pro W3','Hiragino MinchoPro','HiraMinProN-W3','HGS明朝E','ＭＳ Ｐ明朝','MS PMincho',serif;
	font-weight: normal;
}
.roboto{
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
}
img{
		width:100%;
		height:auto;
	}

@media screen and (min-width: 769px) {
	html,body{
	}
	body{
		min-width: 1010px;
	}
}
@media screen and (max-width: 768px) {
	html{-webkit-overflow-scrolling: touch;}
	body{
		font-size: 3.2vw;
		padding-top: 60px;
	}

}



a, a img, .btn1, .btn1 span, .fade, .btn_arrow:before, .btn_arrow:after,  #pagetop{
	transition: 0.4s ease-in-out;
	-webkit-transition: 0.4s ease-in-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

a:hover, a:hover img , .fade:hover, .pull_btn:hover, #pagetop:hover{
	opacity: 0.6;
}

table{width: 100%;}


/*--読み込み時にtransitionが動作する問題--*/
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

/* ----------------------------------------------------------------------------------------------------
*  box
* --------------------------------------------------------------------------------------------------*/
.wrap, .wrap2, .wrap_wide{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.sec_space{
	padding: 75px 0 73px;
}

@media screen and (min-width: 769px) {
	.sp{display: none!important;}
	.wrap{
		width: 800px;
	}
	.wrap_wide {
		width: 1000px;
	}
}

@media screen and (max-width: 768px) {
	.pc{
		display: none!important;
	}
	body{
		min-width: 100%;
	}
	main{
		width: 100%;
		overflow: hidden;
	}
	.wrap, .wrap_wide{
		width: 90%;
	}

	.sp100w{
		width: 100vw;
		margin-left: -5vw;
	}
	.sec_space{
		padding: 35px 0;
	}
}

/* ----------------------------------------------------------------------------------------------------
*  共通パーツ
* --------------------------------------------------------------------------------------------------*/
/* ------------------------------
	タイトル
------------------------------ */
.mid1{
	margin-bottom: 30px;
}
.mid1 span{
	display: block;
	text-align:center;
	line-height: 1;
}
.mid1 .txt{
	color: #ef857d;
	font-size: 2.8rem;
	font-weight: 300;
	letter-spacing: 0.15em;
}
.mid1 .kana{
	color: #666666;
	font-size: 1.1rem;
	letter-spacing: 0.15em;
	margin-top: 8px;
	font-weight: 100;
}
@media screen and (min-width: 769px) {

}
@media screen and (max-width: 768px) {
	.mid1{
		margin-bottom: 20px;
	}
	.mid1 .txt{
		font-size: 6.4vw;
	}
	.mid1 .kana{
		font-size: 2.6vw;
		margin-top: 4px;
	}
}


/* ----------------------------------------------------------------------------------------------------
*  汎用
* --------------------------------------------------------------------------------------------------*/


/* ------------------------------
    clearfix
------------------------------ */
.cf:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.cf {display: inline-block;}

/* Hides from IE Mac */
* html .cf {height: 1%;}
.cf {display:block;}
/* End Hack */

/* ------------------------------
   float
------------------------------ */
.aligncenter{
    display:block;
    margin:0 auto;
}
.alignright{
	float:right;
}
.alignleft{
	float:left;
}

/* ------------------------------
   flex
------------------------------ */
.flex{
    display:flex;
    flex-wrap: nowrap;
    justify-content:space-between;
}
.flex2{
    display:flex;
    flex-wrap: wrap;
}

.justify_between{
    justify-content:space-between;
}
.justify_start{
    justify-content:flex-start;
}
.item_center{
    align-items: center;
}
@media screen and (max-width: 768px) {
	.flex_pc{
		display: block;
	}
}
/* ------------------------------
   text
------------------------------ */
.taC{text-align: center!important;}
.taR{text-align: right!important;}
.taL{text-align: left!important;}

.nowrap{
	display: inline-block;
	text-indent: 0;
}
.bold{font-weight: bold;}

.italic{font-style: italic!important;}
.txt_bl{
	color: #ef857d;
}
.txt_pnk{
	color: #ef857d;
}
.txt_s_pnk{
	color: #E74282;
}

.ls005{
	letter-spacing: 0.05em!important;
}
.lh32 {
	line-height: 3.2!important;
}
.fw100{font-weight: 100!important;}
.fw300{font-weight: 300!important;}
.fw400{font-weight: 400!important;}


.fs16{font-size: 1.6rem!important; }
.fs15{font-size: 1.5rem!important; }
.fs14{font-size: 1.4rem!important; }
.fs12{font-size: 1.2rem!important; }

@media screen and (max-width: 768px) {
	.fs16{font-size: 3.7vw!important; }
	.fs15{font-size: 3.4vw!important; }
	.fs14{font-size: 3.2vw!important; }
	.fs12{font-size: 2.6vw!important; }
	.lh32 {line-height: 2.2!important;}
}
/* ------------------------------
   bg
------------------------------ */
.bg_gl{
	background: #F7F7F9;
}


/* ------------------------------
    字下げ
------------------------------ */
.hang1, .hangli1 li{
	padding-left: 1em!important;
	text-indent: -1em!important;
}
.hang1h, .hangli1h li{
	padding-left: 1.5em!important;
	text-indent: -1.5em!important;
}
.kakko{
	display: inline-block;
	text-indent:-1em!important;
}

/* ------------------------------
    余白
------------------------------ */
/* -------------
    margin
---------------- */
.mB0{margin-bottom: 0px!important;}

.mB_1{margin-bottom: 30px!important;}
.mB_2{margin-bottom: 20px!important;}
.mB_3{margin-bottom: 10px!important;}

@media screen and (max-width: 768px) {
	.mB_1{margin-bottom: 20px!important;}
	.mB_2{margin-bottom: 14px!important;}
	.mB_3{margin-bottom: 6px!important;}

}


/* ------------------------------
    padding
------------------------------ */
.pT0{padding-top: 0!important;}
.pB_1{padding-bottom: 30px!important;}
.pB_2{padding-bottom: 20px!important;}
.pB_3{padding-bottom: 10px!important;}

.pT_1{padding-top: 30px!important;}
.pT_2{padding-top: 20px!important;}
.pT_3{padding-top: 10px!important;}

@media screen and (min-width: 769px) {
}
@media screen and (max-width: 768px) {
	.pB_1{padding-bottom: 20px!important;}
	.pB_2{padding-bottom: 14px!important;}
	.pB_3{padding-bottom: 6px!important;}

	.pT_1{padding-top: 20px!important;}
	.pT_2{padding-top: 14px!important;}
	.pT_3{padding-top: 6px!important;}
}



/* ----------------------------------------------------------------------------------------------------
*  header
* --------------------------------------------------------------------------------------------------*/

header {
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 999;
    top: 0;
    background: rgba(255,255,255,0.9);
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
}

/*----logo------------------------------*/
header .logo{
    padding-top: 22px;
}
header .logo a{
	display: block;
	line-height: 1;
}
header .logo img {
	display: inline-block;
    width: 75px;
}

@media screen and (min-width: 769px) {
	header{
		min-width: 1000px;
	}
	header .wrap{
		width: auto;
		max-width: 1010px;
		padding: 0 5px;
	}
}
@media screen and (max-width: 768px) {
	header{
		height: 60px;
		border-bottom: none;
		box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2);
	}
	header .logo{
    	position: fixed;
    	top: 24px;
    	padding-top: 0;
	}
	header .logo img {
	    width: 75px;
	    margin-top: 0;
	}

}

/*----nav------------------------------*/
header nav{

}
header ul li{
	letter-spacing: 0.05em;
}
header ul li a{
	font-weight: 500;
}
header ul li a:hover{
	opacity: 1;
	color: #ef857d;
}
@media screen and (min-width: 769px) {
	header nav{
		display: block!important;
	}
	header .gnav{
	}
	header .gnav li{
    	display: inline-block;
    	vertical-align: top;
    	position: relative;
    	display: inline-block;
	}
	header .gnav li+li{

	}

	header nav li a{
		display: block;
		width: 100%;
		position: relative;
		line-height: 60px;
	}
	header .gnav>li+li{
		margin-left: 48px;
	}
}


@media screen and (max-width: 768px) {
	.is_gnavOpen header{
		height: 100%;
		overflow-y: scroll;
		background: #fff;
	}
	.menu_opn{
		width: 100%;
    	z-index: 10;
    	clear: both;
    	margin-top: 50px;
    	padding-top: 20px;
    	padding-bottom: 50px;
    	display: none;
	}
	.menu_opn.on{
		display: block;
	}
	.menu_opn.off{
    	display: none;
	}
	header .gnav li{

	}
	header .gnav li+li{
		margin-top: 20px;
	}

	header nav li a{
		display: block;
		text-align:center;
		font-size: 4.2vw;
	}

}


/*------------
sp ハンバーガー
------------*/
.is_gnavOpen { width: 100%; height: 100%; position: fixed; }
/* gnav背景 */
.js_gnavLayer { display: none; }
@media screen and (min-width: 769px){
    header .bl_navTrigger { display: none; }
}
@media screen and (max-width: 768px) {
    header .bl_navTrigger,
    header .bl_navTrigger span { display: inline-block; transition: all .4s; }
    header .bl_navTrigger {
    	position: fixed;
    	top: 17px;
    	top: 0;
    	right: 5%;
    	width: 27px;
    	height: 60px;
    	z-index: 999;
    }
    .is_gnavOpen header .bl_navTrigger {
    	background: none;
    }
    header .bl_navTrigger span {
    	width: 100%;
    	height: 2px;
    	position: absolute;
    	left: 0;
    	top: 50%;
    	background-color: #ef857d;
    	transform-origin:　center;
    }
    header .bl_navTrigger span:nth-of-type(1) { margin-top: -8px; }
    header .bl_navTrigger span:nth-of-type(2) { }
    header .bl_navTrigger span:nth-of-type(3) { margin-top: 8px; }

	header .bl_navTrigger.active span{}
    header .bl_navTrigger.active span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg); }
    header .bl_navTrigger.active span:nth-of-type(2) { display: none;}
    header .bl_navTrigger.active span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg); }
}
/* ----------------------------------------------------------------------------------------------------
*  footer
* --------------------------------------------------------------------------------------------------*/

footer {
	position: relative;
	background: #000;
	color: #DEDEDE;
	padding: 63px 0 40px;
}


#pagetop{
	position: fixed;
	width: 51px;
	height: 51px;
	z-index: 900;
	bottom: 20px;
	right: 20px;
	cursor: pointer;
	background: #BBC3D0;
}
#pagetop:before, #pagetop:after{
	content: "";
	display: block;
	position: absolute;
	width: 9px;
	height: 1px;
	background: #000;
	top: 50%;
	left: 50%;
	transition:0.4s;
}
#pagetop:before{
	transform: rotate(50deg);
	margin-left: -2px;
}
#pagetop:after{
	transform: rotate(-50deg);
	margin-left: -7px;
}
#pagetop.nofix{
	position: absolute;
	top: -25px;
}
#pagetop:hover{
	background: #ef857d;
	opacity: 1;
}
#pagetop:hover:before, #pagetop:hover:after{
	background: #fff;
}
.foot_sns{
	text-align:center;
	margin-bottom: 56px;
}
.foot_sns li{
	display: inline-block;
}
.foot_sns li+li{
	margin-left: 36px;
}

.foot_sns img{
	width: 18px;
}
.copy{
	text-align:center;
	font-size: 1rem;
	line-height: 1;
}
@media screen and (min-width: 769px) {
}
@media screen and (max-width: 768px) {
	footer {
		padding: 30px 0;
	}

	#pagetop{
		width: 35px;
		height: 35px;
		bottom: 20px;
		right: 10px;
	}
	#pagetop.nofix{
		top: auto;
	}
	.foot_sns{
		margin-bottom: 20px;
	}
}
@media screen and (min-width: 870px){
	iframe.contactIframe {
		width: 870px;
		border:none;
		z-index:-100;
	}
}
@media screen and (max-width:869px){
	iframe.contactIframe {
		width: 98%;
		height: 100%;
		padding:0;
		border:none;
	}
}