@charset "utf-8";

/* reset
---------------------------------------------------- */
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,main,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin:0; padding:0; border:0; outline:0; font-size:100%; font-weight:normal; font-style:normal; background:transparent; box-sizing:border-box; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }
ol,ul { list-style:none;} 
table { border-collapse:collapse; border-spacing:0; width:100%; } 
caption,th { text-align:left; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
input,select,textarea { font-family:inherit; font-size:100%; font-weight:normal; box-sizing:border-box; }
label { white-space:nowrap; }
img	{ vertical-align:middle; font-size:0; line-height:0; max-width:100%; height:auto; }
iframe { max-width:100%; }
strong { font-weight:bold; } 
body { -webkit-text-size-adjust:100%; }
@media print {
body { width:1100px; -webkit-transform: scale(0.8); transform: scale(0.8); transform-origin: 0 0; }
}


img[src$=".svg"] { width: 100%; }



/* baseSet
-------------------------------------------------------------------------------------------------------- */
/* common class */
html			{ font-size:calc(100vw / 37.5); } 
body			{ color:#333; font-size:1.6rem; line-height:1.6; font-family:"Open sans",YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;  }
a				{ color:#333; outline:none; text-decoration:none; transition: all 300ms 0s ease;}
a:hover			{ text-decoration:none; }
@media print, screen and (min-width: 768px) {
html			{ font-size:62.5%; } /* 768px Over */
body			{ font-size:1.6rem; line-height:1.8; }
a:hover			{ opacity:0.7; }
a:hover img		{ opacity:0.7; }
a:hover p		{ opacity:0.7; }
}


/* unique class */
.inner			{ position:relative; max-width:1110px; margin:0 auto; padding:0 1rem; }
.only-pc		{ display:none; }
@media print, screen and (min-width: 768px) {
.inner			{ padding:0 30px; }
.only-sp		{ display:none; }
.only-pc		{ display:block; }
}
@media print, screen and (min-width: 1024px) {
.inner			{ padding:0 10px; }

}





/* header
-------------------------------------------------------------------------------------------------------- */
#header								{ width:100%; height:5rem; transition:0.5s;  }
#header .head-box					{ position:relative; z-index:100; }
#header .head-box .instagram-btn	{ position:absolute; top:0; right:10rem; }
#header .head-box .instagram-btn a	{ display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; }
#header .head-box .instagram-btn img	{ width: 2rem; }
#header .head-box .contact-btn		{ position:absolute; top:0; right:5rem; width: 5rem; z-index:161;   }
#header .head-box .contact-btn a	{   }
#header .head-logo					{ z-index: 160; position:absolute; top:1rem; left:1.2rem; width:11rem; transition: 0.5s;  }
#header #gNav 						{ }
#header #gNav #gMenuBtn				{ display:block; position:absolute; top:0; right:0; z-index:161; }
#header #gNav #gMenuBtn a			{ display:block; padding-top:5rem; overflow:hidden; width:5rem; height:0; background:url(../images/common/btn_gmenubtn.png) no-repeat center center; background-size:contain; }
#header #gNav.view #gMenuBtn		{ position:fixed; }
#header #gNav.view #gMenuBtn a		{ background-image:url(../images/common/btn_close.png); background-size:5rem; }
#header #gNav #gMenu				{ width:100%; height:100vh; overflow:hidden; position:fixed; right:0; top:0; padding-top:6rem; z-index:160; transition: 0.3s;  background-color:#102d5b; -webkit-transform:translate(100%,0); transform:translate(100%,0); }
#header #gNav.view #gMenu			{ -webkit-transform:translate(0,0); transform:translate(0,0); }
#header #gNav #gMenu ul				{ -webkit-display:flex; display:flex; flex-wrap: wrap;  }
#header #gNav #gMenu li				{ width:50%;  }
#header #gNav #gMenu li a span		{ display:block; padding:1.8rem 2rem 1.4rem; font-size:1.2rem; color:#fff;  }
@media print, screen and (min-width: 768px) {
#header								{ height:60px; }
#header .head-box:before			{ width: 28rem; height: 24rem;}
#header .head-box .instagram-btn	{ position:absolute; top:0; right:120px; }
#header .head-box .instagram-btn a	{ width: 6rem; height: 6rem; }
#header .head-box .contact-btn		{ position:absolute; top:0; right:60px; width: 60px;   }
#header .head-logo					{ top:13px; left:30px; width:130px; transition: 0.5s; }
#header #gNav #gMenuBtn				{ display:block; position:absolute; top:0; right:0; z-index:161; }
#header #gNav #gMenuBtn a			{ padding-top:60px; width:60px; height:0; }
#header #gNav.view #gMenuBtn a		{ background-size:60px; }
#header #gNav #gMenu li				{  }
#header #gNav #gMenu li a span		{ padding:30px 30px 26px; font-size:16px;  }
}

@media print, screen and (min-width: 1024px) {
#header									{ height:100px;}
#header .head-box						{ -webkit-display:flex; display:flex; justify-content: flex-end;  }
#header .head-box .instagram-btn		{ top: 2.2rem; right: 16rem; }
#header .head-box .contact-btn			{ display: none;}
#header .head-logo						{ width:100%; max-width: 170px; top:25px; left:40px;}
#header #gNav							{ width: 78%;  }
#header #gNav #gMenuBtn					{ display:none; }
#header #gNav #gMenu					{ width:100%; display: flex; justify-content: flex-end; position:static; height: auto; padding-top: 0; margin: 0; background:none; -webkit-transform:translate(0,0); transform:translate(0,0);}
#header #gNav #gMenu ul					{ -webkit-display:flex; display:flex; flex-wrap: wrap; margin-top: 22px;  }
#header #gNav #gMenu li					{ width:auto; }
#header #gNav #gMenu li a				{ display:block; padding: 20px 5px 16px; }
#header #gNav #gMenu li a span			{ padding: 0; font-size:13px; color:#333333; }
#header #gNav #gMenu li.contact 		{ width: 160px; margin-left: 60px; }
#header #gNav #gMenu li.contact a 		{ display: block; padding: 20px 0 16px 20px; background: #102d5b; }
#header #gNav #gMenu li.contact a span	{ color: #FFFFFF; padding-left: 25px; background: url("../images/common/ico_mail_wh.png") no-repeat left center; background-size: 16px;}
}

@media print, screen and (min-width: 1200px) {
#header .head-box .instagram-btn		{ right: 22rem; }
#header #gNav #gMenu li a				{ display:block; padding: 20px 10px 16px; }
#header #gNav #gMenu li.contact 		{ width: 220px; margin-left: 60px; }




}



/* footer
-------------------------------------------------------------------------------------------------------- */
footer							{ }
footer .f-nav					{ margin-top: 2rem;}
footer .f-nav ul				{ -webkit-display:flex; display:flex; flex-wrap: wrap; }
footer .f-nav ul li				{ width: 50%; }
footer .f-nav ul li:last-child	{ }
footer .f-nav ul li a			{ display: block; padding: 1rem; font-size: 1.2rem;}
footer .f-box 					{ padding: 3rem 1rem 1.5rem; text-align: center;}
footer .f-box .f-logo			{ width: 12rem; margin: 0 auto;}
footer .f-box .name				{ margin-top: 1rem; font-weight: bold;  font-size: 1.2rem;}
footer .f-box .add				{ margin-top: 0.5rem; font-size: 1.2rem; }
footer .f-box .copyright		{ margin-top: 2rem; font-size: 1rem; }

@media print, screen and (min-width: 768px) {
footer							{ margin: 0 30px; }
footer .f-nav					{ margin-top: 30px;}
footer .f-nav ul				{ justify-content: space-between; }
footer .f-nav ul li				{ width: 25%; }
footer .f-nav ul li a			{ font-size: 14px;}
footer .f-box 					{ padding: 50px 0 20px; }
footer .f-box .f-logo			{ width: 170px; }
footer .f-box .name				{ margin-top: 15px; font-size:14px;}
footer .f-box .add				{ font-size:14px; line-height: 1.8;}
footer .f-box .copyright		{ margin-top: 50px; font-size: 12px; }

}
@media print, screen and (min-width: 1024px) {
footer							{ max-width: 1110px; margin: 0 auto; }
footer .f-nav					{ margin-top: 50px;}
footer .f-nav ul				{ flex-wrap: nowrap; margin: 0 10px; }
footer .f-nav ul li				{ width: auto; }
footer .f-nav ul li a			{ display: block; padding: 0;}
footer .f-box 					{ padding: 90px 0 30px; }
footer .f-box .name				{ margin-top: 20px; font-size:16px;}


}



/* contents
-------------------------------------------------------------------------------------------------------- */

.ttl-en								{ text-align: center; font-size: 1.4rem; line-height: 1.8; color: #333333; font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
.ttl-en span						{ display: block; font-weight: bold; font-size: 2.4rem; color: #102d5b; font-family:"Open sans",YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

.bg-color							{ background-color: #fafafa;}
@media print, screen and (min-width: 768px) {
.ttl-en								{ font-size: 14px; line-height: 1.8;}
.ttl-en span						{ font-size: 30px;}
}
@media print, screen and (min-width: 1024px) {



}


/* pageTop */
#pageTop-wrap				{ position: relative; }
#pageTop					{ width: 6rem; z-index: 150; position: fixed; bottom: 0; right: 0;}

@media print, screen and (min-width: 768px) {
#pageTop					{ width: 80px; }


}



/* pageTitle */
#pageTitle					{ height: 12rem; padding: 3.2rem 0 0 0; background: #cccccc no-repeat center center; background-size: cover;}
#pageTitle .ttl-en			{ color: #FFFFFF; line-height: 1.6; }
#pageTitle .ttl-en span		{ color: #FFFFFF; font-size: 2.5rem; }
#pageTitle.no-image					{ background: #fff; }
#pageTitle.no-image .ttl-en			{ color: #102d5b; }
#pageTitle.no-image .ttl-en span	{ color: #102d5b; }

@media print, screen and (min-width: 768px) {
#pageTitle					{ height: 200px; padding:70px 0 0 0;}
#pageTitle .ttl-en			{ font-size: 16px; }
#pageTitle .ttl-en span		{ font-size: 30px; }
}

@media print, screen and (min-width: 1024px) {
#pageTitle					{ height: 300px; padding:110px 0 0 0;}
#pageTitle .ttl-en			{ font-size: 18px; }
#pageTitle .ttl-en span		{ font-size: 40px; }

}





/* sec-box （セクションにつけるclass） */
.sec-box				{ padding: 3rem 0; overflow: hidden;}
.sec-box.bg-color		{ padding: 4rem 0; }
.sec-box:last-child		{ padding-bottom: 8rem; }

@media print, screen and (min-width: 768px) {
.sec-box				{ padding: 100px 0;}
.sec-box.bg-color		{ padding: 100px 0; }
.sec-box:last-child		{ padding-bottom: 140px; }

}
@media print, screen and (min-width: 1024px) {

}




/* lead-wrap 各ページリード */
#lead-wrap					{ padding: 5rem 0 4rem; background:url("../images/common/lead_bg_left.png")no-repeat left top, url("../images/common/lead_bg_right.png")no-repeat right top; background-size: 55%; }
#lead-wrap .ttl-lead		{ font-size: 1.8rem; text-align: center;}
#lead-wrap .txt-box			{ margin-top: 2rem; font-size: 1.4rem;}

@media print, screen and (min-width: 768px) {
#lead-wrap					{ padding: 80px 0; background:url("../images/common/lead_bg_left.png")no-repeat left top 20px , url("../images/common/lead_bg_right.png")no-repeat right top 20px;   }
#lead-wrap .ttl-lead		{ font-size: 22px; }
#lead-wrap .txt-box			{ max-width: 800px; margin: 2rem auto 0; font-size: 14px;}

}
@media print, screen and (min-width: 1024px) {
#lead-wrap					{ padding: 100px 0 ; }
#lead-wrap .ttl-lead		{ font-size: 28px; }
#lead-wrap .txt-box			{ margin-top: 30px; font-size: 16px;}

}


/* contact-wrap 各ページ下部のお問い合わせ */
#contact-wrap							{ padding: 3rem 0; background: url("../images/common/con_bg.jpg") no-repeat center center; background-size: cover;}
#contact-wrap .ttl-en					{ color: #FFFFFF; }
#contact-wrap .ttl-en span				{ color: #FFFFFF; }
#contact-wrap .txt						{ margin-top: 2rem; color: #FFFFFF; font-size: 1.4rem;}
#contact-wrap .row-box					{ margin-top: 2rem;}
#contact-wrap .con_link					{ margin-top: 1.5rem; text-align: center;}
#contact-wrap .con_link a				{ display: block; padding: 1.5rem; border: #FFFFFF 2px solid; transition: all 300ms 0s ease; }
#contact-wrap .con_link a span			{ padding-left: 2.5rem; color: #FFFFFF; font-size: 1.4rem; background: url("../images/common/ico_mail_wh.png") no-repeat left center; background-size: 1.6rem;}
#contact-wrap .con_link a:hover			{ background: #FFFFFF; opacity: 1 !important;  }
#contact-wrap .con_link a:hover span	{ color: #102d5b; background-image: url("../images/flow/flow_mail.png");}
#contact-wrap .tel						{ margin: 0 3rem 0;}
#contact-wrap .tel a					{}
	
@media print, screen and (min-width: 768px) {
#contact-wrap					{ padding:40px 0 50px;}
#contact-wrap .txt				{ margin-top: 40px; font-size: 16px; text-align: center;}
#contact-wrap .row-box			{ flex-wrap: nowrap; max-width: 720px; margin: 40px auto 0;}
#contact-wrap .con_link			{ width: 60%; max-width: 380px;  margin-top: 1rem; text-align: center;}
#contact-wrap .con_link a span	{ padding-left: 25px; font-size: 16px; background-size: 16px;}
#contact-wrap .tel				{ width: 40%;  max-width: 260px; margin:10px 50px 0;}
}

@media print, screen and (min-width: 1024px) {
#contact-wrap					{ padding: 100px 0;}
#contact-wrap .row-box			{ justify-content: space-between;}
#contact-wrap .con_link a		{ display: block; padding: 22px; border: #FFFFFF 2px solid; }
#contact-wrap .con_link a span	{ padding-left: 28px; font-size: 20px; background-size: 18px;}
#contact-wrap .tel				{ width: 40%;  max-width: 260px; margin:15px 0 0;}


}



/* row-box （pc3分割 sp2分割） */
.row-box.box03						{ -webkit-display:flex; display:flex; flex-wrap: wrap; margin: 0 -5px;}
.row-box.box03 >*					{ width: calc(50% - 10px); margin: 10px 5px 0;}
.row-box.box03 >*:nth-child(-n+2)	{ margin-top: 0;}
@media print, screen and (min-width: 768px) {
.row-box							{ -webkit-display:flex; display:flex; flex-wrap: wrap; }
.row-box.rev						{ flex-direction: row-reverse; }
.row-box.box03						{ margin: 0 -10px;}
.row-box.box03 >*					{ width: calc(33.33% - 20px); margin: 20px 10px 0;}
.row-box.box03 >*:nth-child(-n+3)	{ margin-top: 0;}

}
@media print, screen and (min-width: 1024px) {
.row-box.box03						{ margin: 0 -15px;}
.row-box.box03 >*					{ width: calc(33.33% - 30px); margin: 30px 15px 0;}


}






/* works-idx ( home / works ) */
#works							{ padding: 5rem 0; overflow: hidden;}
#works .row-box					{ margin-top: 2rem;}
#works .row-box.box03 > * 		{ margin-top: 20px;}
#works .row-box.box03 > :nth-child(-n+2){ margin-top: 0;}
#works .inBox					{ }
#works .inBox .cat				{ display: inline-block; margin-top: 1rem; padding: 0.2rem 0.8rem; background: #102d5b; color: #FFFFFF; font-size: 1rem; }
#works .inBox .name				{ margin-top: 0.5rem; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) {
#works							{ padding: 80px 0;}
#works .row-box					{ margin-top: 40px;}
#works .link-btn				{ width: 300px; margin: 40px auto 0; }
#works .inBox .cat				{ margin-top: 15px; padding: 0.2rem 0.8rem; font-size: 12px;  }
#works .inBox .name				{ margin-top: 5px; font-size: 16px; }
#works .row-box.box03 > * 		{ margin-top: 80px;}
#works .row-box.box03 > :nth-child(-n+3){ margin-top: 0;}

}


/* detail  ( news / works ) 
-------------------------------------------------------------------------------------------------------- */


/* cat-list ( news / works ) */
.cat-list 						{ margin-top: 2rem; font-size: 1.2rem; }
.cat-list ul					{ -webkit-display:flex; display: flex; flex-wrap: wrap; justify-content: center; padding: 0.8rem 0.5rem; border-top: solid 1px #bfbfbf; border-bottom: solid 1px #bfbfbf;}
.cat-list ul li					{ width: 33.33%; text-align: center;}
.cat-list ul li.on:after,
.cat-list ul li.current-cat:after{ content:""; width: 1rem; height: 2px; background-color: #102d5b; display: block; margin: -0.3rem auto;}
.cat-list ul li a				{ padding: 1rem 1.5rem; display: block;}

@media print, screen and (min-width: 768px) {
.cat-list						{ margin-top: 6rem; font-size: 1.4rem; }
.cat-list ul					{ padding: 1.4rem; }
.cat-list ul li					{ width: auto; }
.cat-list ul li a				{ padding: 1rem 3rem;}
.cat-list ul li.on:after,
.cat-list ul li.current-cat:after		{ margin: -8px auto;}

}


/* pager-list ( news / works ) */
.pager-list						{ margin-top: 5rem; font-size: 1.2rem;}
.pager-list ul					{ display: flex; justify-content: center;}
.pager-list ul li 				{ margin: 1rem 0.5rem;}
.pager-list ul li a				{ padding: 0.5rem 1.2rem; display: block; background-color: #fff; color: #102d5b;}
.pager-list ul li a.on 			{ background-color: #102d5b; color: #fff;}
.pager-list ul li a span.prev	{ background-image: url(../images/common/ico_ar_bl_r.png) ;background-repeat: no-repeat; background-size: 1rem; background-position: left center; padding-left: 1.5rem;}
.pager-list ul li a span.next	{ background-image: url(../images/common/ico_ar_bl_l.png) ;background-repeat: no-repeat; background-size: 1rem; background-position: right center; padding-right: 1.5rem;}

@media print, screen and (min-width: 768px) {

.pager-list						{ margin-top: 10rem; font-size: 1.6rem;}
.pager-list ul li				{ margin: 1rem;}
.pager-list ul li a 			{ padding: 0.5rem 1.4rem;}
}

/* WordPress Pagination Styles
-------------------------------------------------------------------------------------------------------- */
.screen-reader-text					{ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.navigation{ margin: 20px 0; text-align:center; }
.pagination .nav-links { display: flex; justify-content: center; }
.pagination .nav-links .page-numbers{ margin: 1rem 0.5rem; }
.pagination a.page-numbers { text-decoration: none; display:inline-block; padding:6px 12px; font-size:14px; color:#102d5b; background-color:#fff; }
.pagination span.page-numbers.current{ display:inline-block; padding:6px 12px; font-size:14px; color:#fff; background-color:#102d5b; }
.pagination a.page-numbers.prev	{ background-image: url(../images/common/ico_ar_bl_r.png) ;background-repeat: no-repeat; background-size: 1rem; background-position: left center; padding-left: 1.5rem;}
.pagination a.page-numbers.next	{ background-image: url(../images/common/ico_ar_bl_l.png) ;background-repeat: no-repeat; background-size: 1rem; background-position: right center; padding-right: 1.5rem;}


/* detail ( news / works ) */

#article .detail					{ max-width: 800px; margin: 2rem auto 0; padding: 2rem 0; border-bottom: #CBCBCB 1px solid; border-top: #CBCBCB 1px solid;}
#article .detail .ttl-box			{ margin-bottom: 2rem;}
#article .detail .cat				{ display: inline-block; padding: 0.2rem 0.8rem; background: #102d5b; color: #FFFFFF; font-size: 1rem; }
#article .detail .name				{ margin-top: 0.5rem; font-size: 1.8rem; }
#article .detail .txt-box			{ }
#article .detail .txt-box .title,
#article .detail .txt-box h2		{ margin-top: 1rem; color: #102d5b; font-weight: bold; }
#article .detail .txt-box p			{ margin-top: 0.5rem; font-size: 1.4rem;}
#article .detail .txt-box a			{ color: #102d5b; text-decoration: underline; }
#article .btn						{ margin-top: 4rem; text-align: center; }
#article .btn a						{ display: block; padding: 2rem; font-size: 1.4rem; border: #B0B0B0 1px solid; background: url("../images/common/ico_ar_bl_back.png") no-repeat left 5% center; background-size: 0.8rem;}

@media print, screen and (min-width: 768px) {
#article .detail					{ margin-top: 40px; padding: 40px 0 60px;}
#article .detail .ttl-box			{ margin-bottom: 30px;}
#article .detail .cat				{ font-size: 12px; }
#article .detail .name				{ font-size: 20px; }
#article .detail .txt-box .title,
#article .detail .txt-box h2		{ margin-top: 20px; font-size: 18px; }
#article .detail .txt-box p			 { font-size: 16px; line-height: 1.6;}
#article .btn						{ width: 300px; margin: 4rem auto 0; }
}

@media print, screen and (min-width: 1024px) {
#article .detail .cat				{ font-size: 14px; }
#article .btn						{ margin: 60px auto 0; }

}