@import url('//fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@100;300;400;500;700&family=Noto+Serif+JP:wght@200;300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

@charset "UTF-8";

/* normalize
-------------------*/

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}h1{font-size:2em}abbr[title]{text-decoration:none}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}


.ftCg {font-family: 'Cormorant Garamond', serif;}
.ftSan {font-family: 'Noto Sans JP', sans-serif;}
.ftSer {font-family: 'Noto Serif JP', serif;}
.ftPd {font-family: 'Playfair Display', serif;}

/* reset
-------------------*/

html {
	background:#FFF;
	font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,p,img {
	margin: 0;
	padding: 0;
}
body {
	background: #f8f8f8;
	font-family: 'Noto Serif JP', serif;
	color: #000;
	font-size: 16px;
	font-size: 1.6rem; /* sets the default sizing to make sure nothing is actually 10px */
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.03em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow-x: hidden;
}

.bodyWrap{
	margin: 0 auto;
	max-width: 1200px;
	width: 90%;
	position: relative;
    z-index: 3;
}
.grid {
    position: fixed;
    height: 0;
    top: 0;
      left: 50%;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
    width: 90%;
    max-width: 1200px;
    z-index: 1;
    border-left: 1px solid rgb(204,204,204,0.3);
    border-right: 1px solid rgb(204,204,204,0.3);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.grid:before {
content: "";
height: 0;
width: 1px;
background: rgb(204,204,204,0.3);
position: absolute;
top: 0;
      left: 50%;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.grid.active,
.grid.active:before{
height: 100%;
}

body * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
a,a:link,a:hover,a:focus {
	color: #333;
	text-decoration: none;
	cursor: pointer;
	outline: none;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
/*a:hover {
	text-decoration: underline;
}*/
ul,ol {
	list-style-type: none;
}
::selection {
	background: #888;
	color: #FFF; /* Safari */
}
::-moz-selection {
	background: #888;
	color: #FFF; /* Firefox */
}
#contents p{
	line-height: 1.7;
}
hr.ancHr{
	font-size: 0 !important;
    line-height: 0 !important;
    visibility: hidden !important;
	margin: 0;
	padding: 0;
}
/* base contents
-------------------*/

/*header*/
#header {
 	width:100%;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
    margin-top: 20px;
    position: fixed;
    left: 50%;
    transform:translateX(-50%);
    -webkit- transform:translateX(-50%);
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
    z-index: 2;
}
#header .hdInr {
	width:95%;
    margin: 0 auto;
    border-radius:100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

#header .logo img{
width: 200px;
height: auto;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

/* hamburger menu
-------------------*/

/*header*/
#spHeader{
	display: block;
	margin-bottom: 0;
	width: 100%;
}
#spHeader .logo {
	display: none;
}
#spHeader .logo img {
width: 200px!important;
}

#spHeader ul{
	overflow: hidden;
	zoom: 1;
	position: absolute;
	right: 55px;
	top: 16px;
}
#spHeader li{
	float: left;
	margin: 0 5px;
	text-align: center;
}
#spHeader li a{
	color: #FFF;
	font-size:2.6rem;
	line-height: 1;
}
#spHeader li a i{
}
.spMenu{
	border-radius: 10px;
	background: #f8f8f8;
box-shadow: inset -1px -2px 3px #e7e7e7, inset 10px 8px 11px #fff;
	cursor: pointer;
	display: block;
	height: 60px;
	width: 60px;
	position: fixed;
	right: 40px;
	top: 40px;
	z-index: 1010;
    opacity: 0;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.spMenu.on {
    opacity: 1;
}
.spMenu span {
	background: #1f1f1f;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	zoom: 1; /* Fix for IE7 */
	*display: inline; /* Fix for IE7 */
    height: 2px;
    width: 31px;
    position: absolute;
    left: 14px;
	-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
	transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

.spMenu span:nth-of-type(1) { top: 20px; }
.spMenu span:nth-of-type(2) { top: 28px; }
.spMenu span:nth-of-type(3) { top: 36px; }


.spMenu.active{
	border-radius: 10px;
	background: #333333;
	box-shadow: inset -5px -5px 9px #2f2f2f,
    inset 5px 5px 9px #373737;
}
.spMenu.active span{
	background: #fff;
}
.spMenu.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
	top: 18px;
}
.spMenu.active span:nth-of-type(2) {
	opacity: 0;
}
.spMenu.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
	top: 38px;
}
.spMenu.active small{
	color: #fff;
}


/*spNav*/


#spNav{
	background: #333333;
	height: 100%;
	display: block;
	transition: all 550ms ease 0.25s;
	visibility: hidden;
	width: 100%;
    position: fixed;
	right: -100%;
    top: 0;
	z-index: 990;
}
#spNav.active{
	visibility: visible;
	right: 0;
}

#spNav::after {
	background: #333333;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
#spNav::before,
#spNav::after {
    opacity: 0;
	transition: all 550ms ease 0.25s;
}
#spNav.active::before,
#spNav.active::after {
    opacity: 1;
}
#spNav .closeBtn{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px 3%;
	text-align: right;
}

#spNav .bgBorder{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	/*padding-top: 190px;*/
	height: 100%
}


#spNav .bgBorder:before{
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	background: #616161;
	left: 0;
	top: 0;
}

#spNav .bgBorder:after{
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	background: #616161;
	right: 0;
	top: 0;
}

#spNav .bgBorder .bgMidBorder{
	position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    background: #616161;
    left: 50%;
    top: 0;
}

#spNav .snInr {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#spNav .logo{
	width: 50%;
}

.logoArea{
	width: 65%;
	margin: 0 auto 70px;
}

.logoArea .videoBg{
	mask: url("../lib/cmn_img/logo_shape.svg");
	-webkit-mask-box-image: url("../lib/cmn_img/logo_shape.svg");
	max-width: 500px;
    width: 100%;
}

.logoArea .svgImg{
	position: absolute;
	left: 0;
	top: 0;
}

#spNav .logoText{
	color: #fff;
	font-family: 'Cormorant Garamond', serif;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.4;
}

#spNav .logoText small{
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 700;
    display: block;
}

#spNav .snInr nav {
width: 50%;
}

#spNav .snInr nav ul li {
	position: relative;
	margin-bottom: 100px;
}
#spNav .snInr nav ul li:before{
	content: '';
    width: 2px;
    height: 25px;
    left: 25px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    top: 0px;
    background: #fff;
    position: absolute;
}

#spNav .snInr nav ul li:hover:before{
    left: 0;
    opacity: 1;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#spNav .snInr nav ul li a {
	color: #fff;
  	display: flex;	
  	justify-content: flex-start;
  	align-items: center;
}
#spNav .snInr nav ul li a:hover {
 	b
 	color: #aaaaaa;
}

#spNav .snInr nav ul li a .sec{
	padding: 0 5%;
	width: 25%;
}

#spNav .snInr nav ul li a .sec p{
	font-size: 14px;
	font-size: 1.4rem;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
}

#spNav .snInr nav ul li a .sec p small{
	font-size: 12px;
	font-size: 1.2rem;
}

#spNav .snInr nav ul li a .sec p .ftPd{
	font-size: 18px;
	font-size: 1.8rem;
}

#spNav .snInr nav ul li a .ttl{	
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
	width: 75%;
}

#spNav .snInr nav ul li a .ttl span{	
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
}

#spNav .entryWrap{
    text-align: right;
}

#spNav .entryWrap .entryBtn{
	color: #fff;
  	background: 
    linear-gradient(90deg, currentColor calc(100%/3), transparent 0 calc(200%/3), currentColor 0) 
    var(--d, 0%) 100% /300% 1px no-repeat;
  	transition:0.5s;	
  	font-size: 30px;
  	font-size: 3.0rem;
  	font-family: 'Cormorant Garamond', serif; 
  	font-weight: 700;
  	padding: 0 10px;
  	display: inline-block;
  	margin-bottom: 10px;
}

#spNav .entryWrap .entryBtn:hover {
  --d: 100%;
}

#spNav .entryWrap .entryBtn i{
	margin-right: 10px;
}

@media only screen and (max-width: 1570px) {
#gNav {
    width: 83%;
}
#gNav ul li a {
    font-size: 18px;
    font-size: 1.8rem;
}
#gNav ul li a span {
    font-size: 16px;
    font-size: 1.6rem;
}
#header .logo img {
    width: 180px;
}
}
@media only screen and (max-width: 1366px) {
#gNav ul li a {
    font-size: 16px;
    font-size: 1.6rem;
}
#gNav ul li a span {
    font-size: 14px;
    font-size: 1.4rem;
}
}

@media only screen and (max-width: 1280px) {
#header .logo img {
    width: 165px;
}

}
@media only screen and (max-width: 1024px) {

}

/*contents*/
#contents {
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}
/*footer*/
#footer {
width: 100%;
}
#copyright {
	font-family: 'Cormorant Garamond', serif;
	background: #f8f8f8;
	display:block;
    font-size: 12px;
	font-size: 1.2rem;
	padding: 80px 0 70px;
	text-align:center;
	width:100%;
    font-weight: 500;
}
/* indent
-------------------*/
.center{text-align:center!important;}
.left{text-align:left!important;}
.right{text-align:right!important;}
.top0{margin-top:0 !important;}
.top5{margin-top:5px !important;}
.top10{margin-top:10px !important;}
.top15{margin-top:15px !important;}
.top20{margin-top:20px !important;}
.top25{margin-top:25px !important;}
.top30{margin-top:30px !important;}
.top35{margin-top:35px !important;}
.top40{margin-top:40px !important;}
.btm0{margin-bottom:0 !important;}
.btm5{margin-bottom:5px !important;}
.btm10{margin-bottom:10px !important;}
.btm15{margin-bottom:15px !important;}
.btm20{margin-bottom:20px !important;}
.btm25{margin-bottom:25px !important;}
.btm30{margin-bottom:30px !important;}
.btm35{margin-bottom:35px !important;}
.btm40{margin-bottom:40px !important;}
.btm45{margin-bottom:45px !important;}
.btm50{margin-bottom:50px !important;}
.btm55{margin-bottom:55px !important;}
.btm60{margin-bottom:60px !important;}
.btm65{margin-bottom:65px !important;}
.btm70{margin-bottom:70px !important;}
.btm75{margin-bottom:75px !important;}
.btm80{margin-bottom:80px !important;}
.btm85{margin-bottom:85px !important;}
.btm90{margin-bottom:90px !important;}
.btm95{margin-bottom:90px !important;}
.pT0{padding-top:0!important;}
.pT5{padding-top:5px!important;}
.pT10{padding-top:10px!important;}
.pT15{padding-top:15px!important;}
.pT20{padding-top:20px!important;}
.pT25{padding-top:25px!important;}
.pT30{padding-top:30px!important;}
.pT35{padding-top:35px!important;}
.pT40{padding-top:40px!important;}
.pT45{padding-top:45px!important;}
.pB0{padding-bottom:0!important;}
.pB5{padding-bottom:5px!important;}
.pB10{padding-bottom:10px!important;}
.pB15{padding-bottom:15px!important;}
.pB20{padding-bottom:20px!important;}
.lm5{margin-left:5px !important;}
.lm10{margin-left:10px !important;}
.lm15{margin-left:15px !important;}
.lm20{margin-left:20px !important;}
.lm50{margin-left:50px !important;}
.lm60{margin-left:60px !important;}
.lm70{margin-left:70px !important;}
.rm5{margin-right:5px !important;}
.rm10{margin-right:10px !important;}
.rm15{margin-right:15px !important;}
.rm20{margin-right:20px !important;}
.vAT { vertical-align:top!important;}
.vAM { vertical-align:middle!important;}
.vAB { vertical-align:bottom!important;}
.bold { font-weight: bold;}
.normal { font-weight: normal;}
.is-pc { display: block;}
.is-sp { display: none;}
.is-spS { display: none;}
.spTel{ pointer-events: none; }
.mincho{
	font-family: "Roboto Slab" , Garamond , "Times New Roman" , 'sawarabiM', "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
.marker{ background: linear-gradient(transparent 30%, #ffff66 60%); }

/* size
-------------------*/
.size10 { font-size:1.0rem!important; }
.size11 { font-size:1.1rem!important; }
.size12 { font-size:1.2rem!important; }
.size13 { font-size:1.3rem!important; }
.size14 { font-size:1.4rem!important; }
.size15 { font-size:1.5rem!important; }
.size16 { font-size:1.6rem!important; }
.size17 { font-size:1.7rem!important; }
.size18 { font-size:1.8rem!important; }
.size19 { font-size:1.9rem!important; }
.size20 { font-size:2.0rem!important; }
.size21 { font-size:2.1rem!important; }
.size22 { font-size:2.2rem!important; }
.size23 { font-size:2.3rem!important; }
.size24 { font-size:2.4rem!important; }

/* wide
-------------------*/
.w5 {width:5%!important;}
.w10 {width:10%!important;}
.w15 {width:15%!important;}
.w18 {width:18%!important;}
.w20 {width:20%!important;}
.w25 {width:25%!important;}
.w30 {width:30%!important;}
.w35 {width:35%!important;}
.w40 {width:40%!important;}
.w45 {width:45%!important;}
.w50 {width:50%!important;}
.w55 {width:55%!important;}
.w60 {width:60%!important;}
.w65 {width:65%!important;}
.w70 {width:70%!important;}
.w75 {width:75%!important;}
.w80 {width:80%!important;}
.w85 {width:85%!important;}
.w90 {width:90%!important;}
.w95 {width:95%!important;}
.wFull {width:100%!important;}

/* section
-------------------*/
section {
	clear:both;
}
section.bgColor{
	padding: 60px 0;
}
section.bgColor01{ background: #EEE;}
section.bgColor02{ background: #EAF6F9;}
.scInr{
	margin: 0 auto;
	max-width: 1200px;
	width: 97%;
}
.scInrS{
	margin: 0 auto;
	max-width: 1000px;
	width: 97%;
}
.scInrW{
	margin: 0 auto;
	max-width: 1400px;
	width: 97%;
}
.aural span,
span.aural {
	display:none;
	visibility:hidden;
}

/* compo parts
-------------------*/

/*list*/
.indList,
.indListS {
	margin-bottom:15px;
}
.indList li,
.indListS li {
	line-height:170%;
	text-indent:-1em;
	padding-left:1em;
	margin-bottom:5px;
}
.indListS li {
	font-size: 1.1rem !important;
	line-height:130%;
}
.indList li::before,
.indListS li::before {
	content: '・';
	font-size: 50%;
	margin-right: 5px;
	vertical-align: middle;
}
.numList,
.numListS {
	margin-bottom:15px;
	padding-left:1.6em;
}
.numList li,
.numListS li {
	line-height:150%;
	list-style: decimal outside none;
	margin-bottom: 5px;
}
.numListS li {
	font-size: 1.1rem !important;
	line-height: 130%;
}
/*table*/
.bscTbl01 table{
	border-collapse:collapse;
	border-left:1px solid #DDD;
	border-top:1px solid #DDD;
	width:100%;
}
.bscTbl01 table th,
.bscTbl01 table td{
	background:#FFF;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-right:1px solid #DDD;
	border-bottom:1px solid #DDD;
	line-height:1.4;
	padding:10px 10px 8px;
	text-align:left;
}
.bscTbl01 table th{
	background:#EEE;
    text-align: center;
}
.bscTbl01 table tr.head th{
	background:#8bac61;
	color:#FFF;
}

.bscTbl01 table td span {
color: #8bac61;
}

.bscTbl01 table td {
text-align: center;
}


@media only screen and (max-width: 480px) {

body {
font-size: 14px;
font-size: 1.4rem;
}

/* indent
-------------------*/
.bgFixed {
	position: fixed;
	width: 100%;
	height: 100%;
}
.is-sp{ display: block!important;}
.is-pc{ display: none!important;}
.spImg{ max-width: 100%;}
a.spTel{
	color: #96d1df;
	pointer-events: auto;
	text-decoration: underline;
}
#spNav .snInr {
display: block;
}
#spNav .snInr nav {
    width: 100%;
}

#spNav .snInr nav ul li {
    font-size: 20px;
    font-size: 2.0rem;
    margin-bottom: 20px;
}
.is-spS {
display: block!important;
}
}


.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 1000ms;
	}

.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

/*-------------------------common-----*/

.ftCg {font-family: 'Cormorant Garamond', serif;}
.ftSan {font-family: 'Noto Sans JP', sans-serif;}
.ftSer {font-family: 'Noto Serif JP', serif;}
.ftPd {font-family: 'Playfair Display', serif;}
.ftLd {font-family: linotype-didot, serif;}

.bgDouble{
  position: relative;
  width: 100%;
}

.bgDouble span{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  position: absolute;
  left: -1px;
  top: -1px;
}

.bgDouble p{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  position: absolute;
  left: 1px;
  top: 1px;
}

.head02 .underline{
  display: inline-block;
  position: relative;
  font-size: 45px;
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1.7;
}

.head02 .underline:after{
  content: "";
  background: #000;
  height: 1px;
  width: 100%; 
  position: absolute;
  bottom: 15px;
  left: 0;
}

.head04{
  font-size: 21px;
  font-size: 2.1rem;
  font-family: 'Noto Serif JP', serif;
  border-left: 4px solid #fff;
  padding: 5px 0 5px 25px; 
}

.blanket{
  border-left: 5px solid #000;
  border-right: 5px solid #000;
  position: relative;
}

.blanket:before{
  content: "";
  position: absolute;
  background: #000;
  height: 5px;
  width: 50px;
  left: 0;
  top: 0;
}

.blanket:after{
  content: "";
  position: absolute;
  background: #000;
  height: 5px;
  width: 50px;
  right: 0;
  top: 0;
}

.blanket .blanketInr{
  position: relative;
}

.blanketInr:before{
  content: "";
  position: absolute;
  background: #000;
  height: 5px;
  width: 50px;
  left: 0;
  bottom: 0;
}

.blanketInr:after{
  content: "";
  position: absolute;
  background: #000;
  height: 5px;
  width: 50px;
  right: 0;
  bottom: 0;
}

.o{
border: 3px solid #333;
border-radius: 10px;
display: inline-block;
height: 11px;
width: 11px;
margin-right: 5px;
}

.whiteCircle{
  background: #fff;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  line-height: 74px;
  position: relative;
  text-align: center;
  z-index: 2;
}

.whiteCircle img{
  width: 23px;
}

.commonIntro{
  border-left: 4px solid #000;
  margin-bottom: 80px;
  padding: 15px 0 15px 30px;
}

.commonIntro .head01{
  font-size: 12px;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.commonIntro .head01 span{
  font-size: 26px;
  font-size: 2.6rem;
  font-style: italic;
  font-family: 'Playfair Display', serif;
}

.commonIntro .head02 .ftSer{
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-bottom: 10px;
}

#sec-rule .ruleIntro .text{
  letter-spacing: -0.02em;
}

.textXs{
  font-size: 12px;
  font-size: 1.2rem;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: -0.01em;
}

.textS{
  font-size: 14px;
  font-size: 1.4rem;
  font-family: 'Noto Serif JP', serif;
}

.text{
    font-size: 16px;
    font-size: 1.6rem;
    font-family: 'Noto Serif JP', serif;
    line-height: 2 !important;
    letter-spacing: -0.01em;
}

.textL{
  font-size: 36px;
  font-size: 3.6rem;
}

.textXl{
  font-size: 70px;
  font-size: 7.0rem;
  font-weight: 500;
  line-height: 1.2;
}

/*-------------------------mv-----*/

.hero {
  position: relative;
  width: 200%;
  margin: 0 -50%;
  overflow: hidden;
  z-index: 1;
}

.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.clip.circle{
  clip-path: circle(100% at 50% 50%);
  -webkit-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
.clip.circle.focus{
  clip-path: circle(200px at 50% 50%);
}

.catchWrap{
  position: absolute;
  top: 46%;
  left: 0%;
  transform: translateY(-46%);
  z-index: 2; 
  width: 100%;
}

.catch {
    font-size: 70px;
    font-size: 7.0rem;
    font-family: 'Noto Serif JP', serif;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 40px;
    height: 4.2em;
    display: block;
}

.catch span{
  font-family: 'Noto Sans JP', sans-serif;
}

#topMv{
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#topMv .enText{
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.7;
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 1000ms;
}

#topMv .bgDouble{
  position: absolute;
  left: 50%;
  bottom: 25%;
  z-index: 2;
  font-size: 50px;
  font-size: 5.0rem;
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 1000ms;
}


#topMv .enText.scrollin,
#topMv .bgDouble.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

#topMv .bgDouble span,
#topMv .bgDouble p{
  color: rgba(0,0,0,0.05);
}

/*---joinBtn → btn.css---*/

/*-------------------------intro-----*/

#sec-intro{
  position: relative;
}

#sec-intro .bodyWrap{
  padding: 170px 0 255px;
}

#sec-intro .bgDoubleWrap{
  position: relative;
  bottom: -50px;
  left: 50%;
  width: 144%;
  transform: translate(-50%, 0);
}

#sec-intro .bgDouble{
  font-size: 245px;
  font-size: 24.5rem;
  position: relative;
}

#sec-intro .bgDouble span{
  color: rgba(0,0,0,0.05);
  line-height: 1em;
  position: absolute;
  left: -2px;
  top: -2px;
  transition : all 500ms;

}
#sec-intro .bgDouble p{
  color: rgba(0,0,0,0.05);
  line-height: 1em;
  position: absolute;
  left: 2px;
  top: 2px;
  transition : all 500ms;
}

#sec-intro .flexBox{
  display: flex;
  justify-content: space-between;
}

#sec-intro .flexBox .ttlWrap{
  width: 50%;
}

#sec-intro .flexBox .ttlWrap .head01{
  transition : all 500ms;
}

#sec-intro .flexBox .ttlWrap .head02 .underline{
  transition : all 500ms;
}

#sec-intro .flexBox .ttlWrap .head02 .underline:after{
  transition : all 500ms;
}

#sec-intro .flexBox .detail{
  margin-left: 7%;
  width: 50%;
}

#sec-intro .flexBox .detail .text{
  transition : all 500ms;
}

#sec-intro .colorChange{
  transition : all 500ms;
}

#sec-intro .colorChange.active {
  background: #333333;
  transition : all 500ms;
}

#sec-intro .colorChange.active .flexBox .ttlWrap .head01,
#sec-intro .colorChange.active .flexBox .ttlWrap .head02 .underline,
#sec-intro .colorChange.active .flexBox .detail .text{
  color: #fff;
  transition : all 500ms;
}

#sec-intro .colorChange.active .flexBox .ttlWrap .head02 .underline:after {
    content: "";
    background: #fff;
    transition : all 500ms;
}

#sec-intro .colorChange.active .bgDouble p,
#sec-intro .colorChange.active .bgDouble span{
  color: rgba(255,255,255,0.05);
  transition : all 500ms;
}

/*-------------------------sec-trouble-----*/

#sec-trouble{
  position: relative;
}

#sec-trouble .bgDoubleWrap{
  left: 48%;
  bottom: 15%;
  position: absolute;
  width: 100%;
  transform: translate(-15%,-48%);
}

#sec-trouble .bgDouble span{
  font-size: 120px;
  font-size: 12rem;
  color: rgba(0,0,0,0.03);
  line-height: 1em;
  position: absolute;
  left: -1px;
  top: -1px;  
  text-align: right;
}  

#sec-trouble .bgDouble p{
  font-size: 120px;
  font-size: 12rem;
  color: rgba(0,0,0,0.03);
  line-height: 1em;
  position: absolute;
  left: 2px;
  top: 2px;  
  text-align: right;
}  

#sec-trouble .mainImg img{
  width: 100%;
}

#sec-trouble .bodyWrap{
  position: relative;
  padding: 200px 0 250px;
}

#sec-trouble .troubleTtl{
  text-align: center;
  margin-bottom: 30px;
}

#sec-trouble .troubleTtl span{
  border-bottom: 1px solid #000;
}

#sec-trouble .blanketInr{
  margin-bottom: 60px;
  padding: 15px 20px 40px;
}

#sec-trouble .blanketInr .textXl{
  text-align: center;
}

#sec-trouble .flexBox{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

#sec-trouble .flexBox .qa{
  margin-right: 2%;
  width: 48%;
}

#sec-trouble .flexBox .qa .question{
  margin-bottom: 25px;
}

#sec-trouble .flexBox .qa .question p{
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
}

#sec-trouble .flexBox .qa .question p .ftCg{
  font-size: 40px;
  font-size: 4.0rem;
  background: #fff;
  border-radius: 65px;
  width: 65px;
  height: 65px;
  line-height: 65px;
  margin-right: 10px;
  font-weight: 600;
  display: inline-block;
  text-align: center;
}

#sec-trouble .flexBox .qa .point{
  text-align: center;
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 50px;
}

#sec-trouble .flexBox .qa .point .note{
  display: block;
  font-size: 12px;
  font-size: 1.2rem;
  margin-top: 10px; 
}

#sec-trouble .flexBox .qa li{
  margin-bottom: 12px;
}

#sec-trouble .flexBox .qa li .item{
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

#sec-trouble .flexBox .qa li .ftLd{
  font-size: 38px;
  font-size: 3.8rem;
  font-weight: 700;
  margin-left: 10px;
}

#sec-trouble .flexBox .qa li .ftLd span{
  font-size: 23px;
  font-size: 2.3rem;
}

/*----------bar chart animation ↓↓↓-----*/

.flexBar{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.cb01 {
  background: #000;
  height: 50px;
  animation-name: bar01;
  animation-duration: 2s;
  width: 80%;
}
.cb02 {
  background: #545454;
  height: 50px;
  animation-name: bar02;
  animation-duration: 2s;
  width: 50%;
  -moz-transition-delay:200ms;
  -webkit-transition-delay:200ms;
  -o-transition-delay:200ms;
  -ms-transition-delay:200ms;
}

.cb03 {
  background: #818181;
  height: 50px;
  animation-name: bar03;
  animation-duration: 2s;
  width: 35%;
  -moz-transition-delay:250ms;
  -webkit-transition-delay:250ms;
  -o-transition-delay:250ms;
  -ms-transition-delay:250ms;
}

.cb04 {
  background: #acacac;
  height: 50px;
  animation-name: bar04;
  animation-duration: 2s;
  width: 25%;
  -moz-transition-delay:300ms;
  -webkit-transition-delay:300ms;
  -o-transition-delay:300ms;
  -ms-transition-delay:300ms;
}

.cb05 {
  background: #cdcdcd;
  height: 50px;
  animation-name: bar05;
  animation-duration: 2s;
  width: 20%;
  -moz-transition-delay:350ms;
  -webkit-transition-delay:350ms;
  -o-transition-delay:350ms;
  -ms-transition-delay:350ms;
}

.cb06 {
  background: #cdcdcd;
  height: 50px;
  animation-name: bar06;
  animation-duration: 2s;
  width: 10%;
  -moz-transition-delay:400ms;
  -webkit-transition-delay:400ms;
  -o-transition-delay:400ms;
  -ms-transition-delay:400ms;
}

.cb07 {
  background: #cdcdcd;
  height: 50px;
  animation-name: bar07;
  animation-duration: 2s;
  width: 7%;
  -moz-transition-delay:450ms;
  -webkit-transition-delay:450ms;
  -o-transition-delay:450ms;
  -ms-transition-delay:450ms;
}

@keyframes bar01{ 
  0%{width: 0;} 
  100%{width: 80%;}
}
@keyframes bar02{ 
  0%{width: 0;} 
  100%{width: 50%;}
}
@keyframes bar03{ 
  0%{width: 0;} 
  100%{width: 35%;}
}
@keyframes bar04{ 
  0%{width: 0;} 
  100%{width: 25%;}
}
@keyframes bar05{ 
  0%{width: 0;} 
  100%{width: 20%;}
}
@keyframes bar06{ 
  0%{width: 0;} 
  100%{width: 10%;}
}
@keyframes bar07{ 
  0%{width: 0;} 
  100%{width: 7%;}
}

/*----------circle svg animation ↓↓↓-----*/

.elementWrap{
  margin: 0 auto;
  position: relative;
  width: 75%;
}

.elementWrap .yes{
  position: absolute;
  text-align: center;
  left: 13%;
  top: 3%;
}

.elementWrap .yes .text{
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.2 !important;
}

.elementWrap .yes .ftLd{
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 700;
  line-height: 1.2 !important;
}

.elementWrap .yes .ftLd span{
  font-size: 20px;
  font-size: 2.0rem;
}

.elementWrap .no{
  position: absolute;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.elementWrap .no .text{
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.2 !important;
}

.elementWrap .no .ftLd{
  font-size: 80px;
  font-size: 8.0rem;
  font-weight: 700;
  line-height: 1.2 !important;
}

.elementWrap .no .ftLd span{
  font-size: 44px;
  font-size: 4.4rem;
  
}

.element{
  position: relative;
}

[data-role="radial-progress"]{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  --progress-percent: 0;
  --progress-color: #303030;
  --progress-bar-width: 100%;
  z-index: 2;
}

[data-role="radial-progress"] > circle{
    stroke-width: var(--progress-bar-width);
    stroke-dasharray: calc(100% * 3.141592);
    stroke-dashoffset: calc(100% * (100 - var(--progress-percent))/100 * 3.141592);
    stroke: var(--progress-color);
}
/*Just for animate --data-percent */
#element3 [data-role="radial-progress"] > circle{
  transition: stroke-dashoffset 1s linear;
}
/*Сode that does not depend on radial-progress*/
.element{
  display: inline-block;
  width: 410px;
  height: 410px;
  -webkit-animation: 1s infinite;
  animation: 1s infinite;
}

#element3 [data-role="radial-progress"]{
  transform: rotate(-90deg);
}

[data-role="radial-base"]{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  --progress-percent: 0;
  --progress-color: #e0e0e0;
  --progress-bar-width: 100%;
  z-index: 1;
}

[data-role="radial-base"] > circle{
    stroke-width: var(--progress-bar-width);
    stroke-dasharray: calc(100% * 3.141592);
    stroke-dashoffset: calc(100% * (100 - var(--progress-percent))/100 * 3.141592);
    stroke: var(--progress-color);
}







/*-------------------------sec-solution-intro-----*/

#sec-solution-intro{
  position: relative;
  overflow: hidden;
}

#sec-solution-intro .bodyWrap{
  padding: 100px 0 100px;
}

#sec-solution-intro .videoWrap {
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 0;
  object-fit: cover;
}
#sec-solution-intro .videoWrap .videoBg{
width: 180%;
}
#sec-solution-intro .borderHead{
  margin-bottom: 30px;
}

#sec-solution-intro .borderHead span{
  font-size: 18px;
  font-size: 1.8rem;
  font-family: 'Cormorant Garamond', serif;
  position: relative;
  padding-left: 115px;
}

#sec-solution-intro .borderHead span:before{
  content: "";
  position: absolute;
  background: #000;
  height: 1px;
  width: 100px;
  top: 50%;
  left: 0;
}

#sec-solution-intro .solutionHead{
  font-size: 32px;
  font-size: 3.2rem;
}

#sec-solution .bodyWrap{
  padding: 100px 0;
}

#sec-solution .bodyWrap .top .whiteCircle{
  margin: 0 auto 25px;
}

#sec-solution .bodyWrap .ttl{
  text-align: center;
  margin-bottom: 40px;
}

#sec-solution .bodyWrap .ttl span{
  border-bottom: 1px solid #000;
  line-height: 1.7;
}

#sec-solution .bodyWrap .head02{
  font-size: 46px;
  font-size: 4.6rem;
  margin-bottom: 15px;
  text-align: center;
  font-weight: 600;
}

#sec-solution .bodyWrap .bgDoubleWrap{
  margin-bottom: 100px;
  text-align: center;
}

#sec-solution .bodyWrap .bgDouble span{
  font-size: 90px;
  font-size: 9rem;
  color: rgba(0,0,0,0.05);
  line-height: 1em;
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
  top: -1px;
  width: 100%;
}  

#sec-solution .bodyWrap .bgDouble p{
  font-size: 90px;
  font-size: 9rem;
  color: rgba(0,0,0,0.05);
  line-height: 1em;
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
  margin-left: 2px;
  top: 2px;  
  width: 100%;
}  


/*-------------------------sec-solution-s01-----*/

.solution .itemWrap{
  padding-left: 33px; 
  width: 88%;
}

.solution .itemWrap .ttl{
  margin-bottom: 40px;
}

.solution .itemWrap .ttl span{
  border-bottom: 1px solid #000;
  font-size: 21px;
  font-size: 2.1rem;
  line-height: 1.7;
}

.solution .flexBox{
  display: flex;
  justify-content: space-between;
}

.solution .flexBox .detail{
  width: 50%;
}

.solution .flexBox .imgWrap{
  padding: 0 4%;
  width: 50%;
}

#sec-solution-s01{
  background: #f2f2f2;
}

#sec-solution-s01 .bodyWrap{
  padding: 100px 0 140px;
}

#sec-solution-s01 .bodyWrap .flexBox{
  align-items: end;
}

#sec-solution-s02 .bodyWrap{
  padding: 140px 0 100px;
}
#sec-solution-s02 .bodyWrap .flexBox,
#sec-solution-s04 .bodyWrap .flexBox {
flex-direction: row-reverse;
}
.fr {
flex-direction: row!important;
}

#sec-solution-s02 .bodyWrap .flexBox .item{
  margin: 0 2%;
  width: 46%;
}

#sec-solution-s02 .bodyWrap .flexBox .item .img{
 text-align: center;
 margin-bottom: 10px;
}

#sec-solution-s02 .bodyWrap .flexBox .item .img img{
  max-width: 255px;
  width: 100%;
}

#sec-solution-s02 .bodyWrap .flexBox .item .ttl{
  margin-bottom: 30px;
  text-align: center;
}

#sec-solution-s02 .bodyWrap .flexBox .item .ttl span{
  border-bottom: 1px solid #000;
  font-size: 21px;
  font-size: 2.1rem;
}

#sec-solution-s02 .bodyWrap .flexBox .item ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#sec-solution-s02 .bodyWrap .flexBox .item ul li{
  margin-bottom: 2%;
  width: 48%;
}

#sec-solution-s02 .bodyWrap .flexBox .item ul li p{
  background: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  border-radius: 50px;
  padding: 20px; 
}

#sec-solution-s02 .bodyWrap .flexBox .item ul li p.textXs{
  background: transparent;
  border-radius: 0;
  font-size: 12px;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin-top: 10px;
  padding: 0;
  text-align: right;
}  

#sec-solution-s02 .bodyWrap .flexBox .item ul .fas.fa-check-circle{
  margin-right: 15px;
}

#sec-solution-s02 .bodyWrap .flexBox .item ul .off{
  background: #ededed;
  color: #c2c0c0;
}

#sec-solution-s03{
  background: #f2f2f2;
}

#sec-solution-s03 .bodyWrap{
  padding: 130px 0;
} 

#sec-solution-s03 .flexBox{
  margin-bottom: 30px;
}

#sec-solution-s03 ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

#sec-solution-s03 ul li{
  border-radius: 20px;
  background: #f2f2f2;
box-shadow: inset 1px 2px 3px #e1e1e1, inset -3px -2px 3px #fff;
  padding: 40px 30px;
  width: 48%;
  margin-bottom: 2%;
  position: relative;
}

#sec-solution-s03 ul li:nth-of-type(2){
  margin-top: 40px;
}

#sec-solution-s03 ul li:nth-of-type(3){
  margin-top: -40px;
}

#sec-solution-s03 ul li:nth-of-type(1):after,
#sec-solution-s03 ul li:nth-of-type(2):after,
#sec-solution-s03 ul li:nth-of-type(3):after,
#sec-solution-s03 ul li:nth-of-type(4):after{
  position: absolute;
  font-size: 154px;
  font-size: 15.4rem;
  font-family: 'Playfair Display', serif;
  color: rgba(0,0,0,0.1);
  right: 30px;
  top: -15px;
  letter-spacing: 0em;
  font-style: italic;
}

#sec-solution-s03 ul li:nth-of-type(1):after{ content:"01";}
#sec-solution-s03 ul li:nth-of-type(2):after{ content:"02";}
#sec-solution-s03 ul li:nth-of-type(3):after{ content:"03";}
#sec-solution-s03 ul li:nth-of-type(4):after{ content:"04";}

#sec-solution-s03 ul li .flexPoint{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #fff;
  padding-bottom: 20px;
  margin-bottom: 45px;
  position: relative;
}

#sec-solution-s03 ul li .flexPoint:after{
  content: "";
  background: #e3e3e3;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%; 
}

#sec-solution-s03 ul li .flexPoint .blackCircle{
  background: #000000;
  border-radius: 100px;
  height: 80px;
  width: 80px;
  margin-right: 15px;
  position: relative;
}

#sec-solution-s03 ul li .flexPoint .blackCircle p{
  color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.05em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#sec-solution-s03 ul li .flexPoint .pTtl{
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  width: calc(100% - 95px);
}

#sec-solution-s03 ul li span{
  display: inline-block;
  position: relative;
  width: 50px;
}

#sec-solution-s03 ul li span:after{
  content: "”";
  color: #cfcfcf;
  font-family: 'Playfair Display', serif;
  font-size: 100px;
  font-size: 10rem;
  line-height: 1;
  position: absolute;
  left: 0;
  bottom: -20px;
  transform: rotate(180deg);
}

#sec-solution-s03 ul li .text{
  letter-spacing: -0.1em;
}

#sec-solution-s04 .bodyWrap{
  padding: 140px 0 170px
}

#sec-solution-s04 .bodyWrap .flexBox{
  align-items: flex-end;
  margin-bottom: 100px;
}

#sec-solution-s04 .blanket{
  margin: 0 auto;
  width: 75%;
}

#sec-solution-s04 .blanketInr{
  padding: 20px 0 30px;
}

#sec-solution-s04 .blanket .ttl{
  margin-bottom: 30px;
  text-align: center;
}

#sec-solution-s04 .blanket .ttl span{
  border-bottom: 1px solid #000;
}

#sec-solution-s04 .blanket .textL{
  margin-top: -42px;
  text-align: center;
}

#sec-solution-s04 .blanket .ftPd{
  font-size: 120px;
  font-size: 12rem;
}

/*-------------------------sec-think-----*/

#sec-think{
  position: relative;
  overflow: hidden;
}

#sec-think .bodyWrap{
  padding: 140px 0 140px;
}

#sec-think .videoWrap {
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100vh;
  z-index: 0;
  object-fit: cover;
}

#sec-think .videoBg {
  width: 180%;
}

#sec-think .head01{
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 35px;
}

#sec-think .flexBox{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 70px;
}

#sec-think .flexBox .head02{
  width: 50%;
}

#sec-think .flexBox .text{
  margin-top: 16px;
  width: 50%;
  z-index: 1;
}


#sec-think .swiper {
  /*width: 100vw;
  height: 100%;
  position: relative;
  margin-left: -60px;
  margin-right: calc(((100vw - 100%) / 2) * -1);
  padding-left: 60px;*/
  overflow: visible;
  z-index: 2;
  margin-bottom: 100px;
}

#sec-think .swiper-slide {
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}


#sec-think .swiper-wrapper{
  left: -70px;
}

#sec-think .swiper-slide{
  width: calc(880 / 1280 * 100vw);
}

#sec-think .swiper-slide img {
  height: auto;
  width: 100%;
}

#sec-think .btmText{
  width: 49%;
}

#sec-think .btmText .underlineTtl{
  margin-bottom: 40px;
}

#sec-think .btmText .underlineTtl span{
  border-bottom: 1px solid #000;
  font-size: 21px;
  font-size: 2.1rem;
  line-height: 1.7;
}

#sec-think .bgDoubleWrap{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%,-50%);
}

#sec-think .bgDoubleWrap span{
  font-size: 260px;
  font-size: 26rem;
  color: rgba(255,255,255,0.1);
  line-height: 1em;
  position: absolute;
  left: -2px;
  top: -2px;  
  text-align: right;
}  

#sec-think .bgDoubleWrap p{
  font-size: 260px;
  font-size: 26rem;
  color: rgba(255,255,255,0.1);
  line-height: 1em;
  position: absolute;
  left: 2px;
  top: 2px;  
  text-align: right;
}  

/*-------------------------sec-rule-----*/

#sec-rule{
  position: relative;
  z-index: 1;
}

#sec-rule .bodyWrap{
  padding: 140px 0 240px;
}

#sec-rule .bodyWrap{
  position: relative;
}

#sec-rule .commonIntro{
  margin-bottom: 80px;
}

#sec-rule .flexBox{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#sec-rule .ruleWrap{
  position: relative;
  margin-left: -60px;
  margin-right: calc(((100vw - 100%) / 2) * -1);
  padding-left: 60px;
  overflow: visible;
  z-index: 2;
  margin-top: -300px;
}

#sec-rule .ruleWrap .slick-prev,
#sec-rule .ruleWrap .slick-next{ 
  border: transparent;
  border-radius: 150px;
  background: #f2f2f2;
  box-shadow: inset -5px -5px 5px #e3e3e3,
  inset 5px 5px 5px #ffffff;
  height: 80px;
  max-width: 325px;
  width: 100%;
}

#sec-rule .ruleWrap .btnText{
  color: #000;
}

#sec-rule .ruleWrap .slick-prev {
  left: 20%;
  top: 109%;
}

#sec-rule .ruleWrap .slick-next {
  left: inherit;
  right: 34.5%;
  top: 109%;
}

#sec-rule .ruleWrap .slick-prev:before,
#sec-rule .ruleWrap .slick-prev:after,
#sec-rule .ruleWrap .slick-next:before,
#sec-rule .ruleWrap .slick-next:after{
  background: transparent;
  transform: inherit;
  left: 0%;
  right: 50%;
  top: 50%;
  width: 100%;
} 

#sec-rule .ruleWrap .slick-prev:hover,
#sec-rule .ruleWrap .slick-prev:focus, 
#sec-rule .ruleWrap .slick-next:hover, 
#sec-rule .ruleWrap .slick-next:focus {
    outline: none;
    background: #dddddd;
}

#sec-rule .ruleWrap .slick-prev:before{
  content:"PREV RULE";
  font-size: 18px;
  font-size: 1.8rem;
  color: #000;
  font-family: 'Cormorant Garamond', serif;
}

#sec-rule .ruleWrap .slick-next:before{
  content:"NEXT RULE";
  font-size: 18px;
  font-size: 1.8rem;
  color: #000;
  font-family: 'Cormorant Garamond', serif;
}

#sec-rule .ruleWrap .slick-prev button,
#sec-rule .ruleWrap .slick-prev button{
  position: relative;
  display: block;
  height: 80px;
}

#sec-rule .ruleWrap .slick-prev span,
#sec-rule .ruleWrap .slick-next span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sec-rule .ruleWrap .slick-prev i{
  position: absolute;
  left: 8%;
  top: 50%;
  color: #000;
  transform: translate(-8%, -50%) rotate(-90deg);
  font-size: 20px;
  z-index: 2;
}

#sec-rule .ruleWrap .slick-next i{
  position: absolute;
  right: 8%;
  top: 50%;
  color: #000;
  transform: translate(-8%, -50%) rotate(90deg);
  font-size: 20px;
  z-index: 2;
}

#sec-rule .flexBox .detail{
  border-left: 1px dashed #000;
  height: 400px;
  max-width: 560px;
  width: 100%;
  margin-right: 20px;
}

#sec-rule .flexBox .detail .black{
  background: #000;
  color: #fff;
  border-radius: 0 30px 30px 0;
  padding: 10px 0;
  text-align: center;
  width: 140px;
}

#sec-rule .flexBox .detail .black{
  font-size: 12px;
  font-size: 1.2rem;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 50px;
}

#sec-rule .flexBox .detail .black span{
  font-size: 21px;
  font-size: 2.1rem;
  font-family: 'Playfair Display', serif;
}

#sec-rule .flexBox .detail .item{
  padding-left: 30px;
}

#sec-rule .flexBox .detail .item .lineTtl{
  border-bottom: 1px solid #000;
  font-size: 21px;
  font-size: 2.1rem;
  line-height: 2;
}

#sec-rule .flexBox .detail .item .lineTtl b{
  position: relative;
}

#sec-rule .flexBox .detail .item .lineTtl b:after{
  content:"・";
  position: absolute;
  top: -20px;
  left: 0;
}

#sec-rule .flexBox .detail .item .textS{
  margin: 20px 0 30px;
}

#sec-rule .flexBox .detail .item .img img{
  display: block;
  margin: 0 auto;
  width: 90%;
}  

/*-------------------------sec-wanted-----*/

#sec-wanted{
  background: #333333;
}

#sec-wanted .bodyWrap{
  padding: 160px 0 220px;
}

#sec-wanted .bodyWrap .fb01Wrap{
  position: relative;
}

#sec-wanted .bodyWrap .bgDouble{
  position: absolute;
  left: 30%;
  top: 5%;
  z-index: 1;
}

#sec-wanted .bodyWrap .bgDouble span{ 
  font-size: 300px;
  font-size: 30rem; 
  color: rgba(255,255,255,0.05);
  line-height: 1em;
  position: absolute;
  left: -2px;
  top: -2px;
}

#sec-wanted .bodyWrap .bgDouble p{ 
  font-size: 300px; 
  font-size: 30rem; 
  color: rgba(255,255,255,0.05);
  line-height: 1em;
  position: absolute;
  left: 2px;
  top: 2px;
}

#sec-wanted .bodyWrap .flexBox{
  display: flex;
  justify-content: space-between;
  margin-bottom: 90px;
}

#sec-wanted .bodyWrap .flexBox.fb01{
  align-items: end;
}

#sec-wanted .bodyWrap .flexBox.fb02{
  align-items: center;
}

#sec-wanted .bodyWrap .flexBox .detail{
  width: 50%;
}


#sec-wanted .bodyWrap .flexBox .head02 .underline{
  color: #fff;
}

#sec-wanted .bodyWrap .flexBox .head02 .underline:after{
  background: #fff;
}


#sec-wanted .bodyWrap .flexBox .detail .head02{
  margin-bottom: 70px;
}

#sec-wanted .bodyWrap .flexBox .detail .head03{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 55px;
}

#sec-wanted .bodyWrap .flexBox .detail .head03 .whiteCircle{
  margin-right: 12px;
}

#sec-wanted .bodyWrap .flexBox .detail .head03 .headText{
  color: #fff;
  font-size: 21px;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  font-weight: 600;
}

#sec-wanted .bodyWrap .flexBox .detail .text,
#sec-wanted .bodyWrap .flexBox .detail .textS{
  color: #fff;
}


#sec-wanted .bodyWrap .flexBox .bold{
  color: #fff;
}

#sec-wanted .bodyWrap .flexBox .img{
  width: 50%;
}

#sec-wanted .bodyWrap .flexBox .img img{
  display: block;
  margin: 0 auto;
  width: 80%;
  position: relative;
  z-index: 2;
}

#sec-wanted .bodyWrap .flexBox ul{
  padding-left: 55px;
}

#sec-wanted .bodyWrap .flexBox ul li{
  margin-bottom: 30px
}

#sec-wanted .bodyWrap .flexBox ul li .bold{
  position: relative;
}

#sec-wanted .bodyWrap .flexBox ul li .bold:before{
  content: "";
  position: absolute;
  left: -25px;
  top: 5px;
  border: 2px solid #fff;
  border-radius: 10px;
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-right: 5px;
}
#sec-wanted .bodyWrap .flexBox.rr {
flex-direction: row-reverse;
}
#sec-wanted .bodyWrap .head04{
  color: #fff;
  margin-bottom: 45px;
}

#sec-wanted .bodyWrap{
  overflow: inherit !important;
}

#sec-wanted .bodyWrap .profileWrap{
  position: relative;
  margin-left: -60px; 
  margin-right: calc(((100vw - 100%) / 2) * -1); 
  padding-left: 60px; 
  overflow: visible;
  z-index: 2;
}    

#sec-wanted .bodyWrap .profile{
  background: #fff;
  padding: 45px 40px;
  margin-right: 60px;
}

#sec-wanted .bodyWrap .profileWrap .slick-track{
    display: flex !important;
}

#sec-wanted .bodyWrap .profileWrap .slick-slide{
    height: inherit !important;
    margin-bottom: 0;
    object-fit: cover;
}

#sec-wanted .bodyWrap .profileWrap{
  overflow: inherit !important;
}

#sec-wanted .bodyWrap .profileWrap .slick-list {
    overflow: visible;
}

#sec-wanted .bodyWrap .profileWrap .slick-prev,
#sec-wanted .bodyWrap .profileWrap .slick-next{
  border-radius: 50%;
  background: #333333;
  box-shadow: inset -5px -5px 6px #1d1d1d,
  inset 5px 5px 6px #494949;
}

#sec-wanted .bodyWrap .profileWrap .slick-prev {
    top: 108%;
    left: 70%;
    width: 85px;
    height: 85px;
}

#sec-wanted .bodyWrap .profileWrap .slick-next {
    top: 108%;
    left: 77%;
    width: 85px;
    height: 85px;
}

#sec-wanted .bodyWrap .profileWrap .slick-prev:before {
  content:"";
  background: url(../lib/cmn_img/arrow-left.png) no-repeat;
  position: absolute;
  transform: inherit;
  left: 48%;
  top: 50%;
  height: 18px;
  width: 10px;
  transform: translate(-50%, -48%);
}

#sec-wanted .bodyWrap .profileWrap .slick-next:before {
  content:"";
  background: url(../lib/cmn_img/arrow-right.png) no-repeat;
  position: absolute;
  transform: inherit;
  left: 48%;
  top: 50%;
  height: 18px;
  width: 10px;
  transform: translate(-50%, -48%);
}


#sec-wanted .bodyWrap .profileWrap .slick-prev:after,
#sec-wanted .bodyWrap .profileWrap .slick-next:after {
  display: none;
}

#sec-wanted .bodyWrap .profileWrap .slick-prev:hover,
#sec-wanted .bodyWrap .profileWrap .slick-prev:focus, 
#sec-wanted .bodyWrap .profileWrap .slick-next:hover, 
#sec-wanted .bodyWrap .profileWrap .slick-next:focus {
    outline: none;
    background: #222222;
    border: none;
}

#sec-wanted .bodyWrap .profile .flexBox{
  border-bottom: 1px solid #dddddd;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  padding-bottom: 30px;
  align-items: center;
}

#sec-wanted .bodyWrap .profile .flexBox .img{
  margin-right: 2%;
  width: 30%;
}

#sec-wanted .bodyWrap .profile .flexBox .detail{
  width: 68%;
}

#sec-wanted .bodyWrap .profile .flexBox .detail .name{
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 700;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 5px;
}

#sec-wanted .bodyWrap .profile .flexBox .detail .info span{
  border: 1px solid #dddddd;
  border-radius: 2px;
  font-size: 14px;
  font-size: 1.4rem;
  font-family: 'Cormorant Garamond', serif;
  margin-right: 5px;
  padding: 2px 7px;
  line-height: 1;
  display: inline-block;
}

#sec-wanted .bodyWrap .profile .flexBox .detail .info p{
  display: inline-block;
  font-size: 14px;
  font-size: 1.4rem;
  margin-right: 10px;
}

#sec-wanted .bodyWrap .profile ul li{
  margin-bottom: 30px;
}

#sec-wanted .bodyWrap .profile ul li:nth-of-type(3){
  margin-bottom: 0;
}

#sec-wanted .bodyWrap .profile ul li .ttl{
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 15px;
}



/*-------------------------sec-req-----*/

#sec-req .bodyWrap{
  padding: 120px 0;
}

#sec-req .bodyWrap .top{
  margin-bottom: 100px;
}

#sec-req .bodyWrap .top .whiteCircle{
  text-align: center;
  margin: 0 auto 40px;
}

#sec-req .bodyWrap .top .head01{
  font-size: 46px;
  font-size: 4.6rem;
  line-height: 1.4;
  margin-bottom: 70px;
  text-align: center;
  font-weight: 600;
}

#sec-req .bodyWrap .headWrap{
  border-left: 4px solid #333333;
  margin-bottom: 115px;
  padding: 15px 20px;
}
#sec-req .bodyWrap .headWrap .head02{
font-size: 30px;
font-size: 3rem;
font-weight: 600;
margin-bottom: 10px;
}
#sec-req .bodyWrap .top .topText{
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
}

#sec-req .bodyWrap .flexBox{
  display: flex;
  justify-content: flex-start;
}

#sec-req .bodyWrap .flexBox li{
  width: 48%;
}

#sec-req .bodyWrap .flexBox li:nth-of-type(1){
  margin-right: 2%;
}

#sec-req .bodyWrap .flexBox li dl{
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

#sec-req .bodyWrap .flexBox li dl dt{
  width: 23%;
}

#sec-req .bodyWrap .flexBox li dl dt p{
  border-left: 2px solid #000;
  padding-left: 20px;
}

#sec-req .bodyWrap .flexBox li dl dd{
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.4;
  width: 75%;
}

#sec-req .bodyWrap .flexBox li dl dd .bold{
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.7;
  margin-bottom: 5px;
}

#sec-req .bodyWrap .flexBox li ul.indent li{
width: 100%;
margin-right: 0;
padding-left: 19px;
text-indent: -18px;
margin-top: 5px;
}
/*-------------------------sec-join-----*/

#sec-join{
  background: #333333;
}

#sec-join .bodyWrap{
  padding: 70px 0 110px;
}

#sec-join .bgDoubleWrap{
  margin-bottom: 110px;
}

#sec-join .bgDouble{
  position: relative;
  width: 100%;
}

#sec-join .bgDouble span{
  font-size: 120px;
  font-size: 12rem;
  color: rgba(255,255,255,0.03);
  line-height: 1em;
  position: absolute;
  left: 49%;
  top: -1px;
  text-align: center;
  transform: translate(-49%, -1px);
  width: 100%;
}  

#sec-join .bgDouble p{
  font-size: 120px;
  font-size: 12rem;
  color: rgba(255,255,255,0.03);
  line-height: 1em;
  position: absolute;
  left: 51.4%;
  top: 2px;
  text-align: center;
  transform: translate(-51.1%, -2px);
  width: 100%;
}  

#sec-join .flexBox{
  display: flex;
  justify-content: space-between;
}

#sec-join .joinBtn{
  margin: 0 2%;
  width: 46%;
}
/*animation*/

.fadein {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 1000ms;
}
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/*-------------------joinBtn-----*/

#topMv .joinBtn{
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 3;
  opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#topMv .joinBtn.active{
  opacity: 1;
}

#topMv .joinBtn .joinBtnWrap{
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#topMv .joinBtn .joinBtnWrap:before{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "";
    background: url(../img/text_entry_circle.svg) no-repeat 50%/contain;
    width: 100%;
    height: 100%;
    animation: rotationCircle 20s linear infinite;
    border-radius: 20px;
}

#topMv .joinBtn a{
  border-radius: 70px;
  background: #f8f8f8;
box-shadow: inset -1px -2px 3px #e7e7e7, inset 10px 8px 11px #fff;
}

#topMv .joinBtn a i{
  font-size: 30px;
}

@keyframes rotationCircle{0%{transform:rotate(0)}to{transform:rotate(1turn)}}

#topMv .joinBtnWrap a{
  display: inline-block;
  width: 80px;
  position: relative;
  height: 80px;  
}

#topMv .joinBtnWrap a span.wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#topMv .joinBtnWrap a span.wrap:nth-child(2){
  background: #000;
  color: #fff;
  overflow: hidden;
  z-index: 2;
  transition: 0.3s;
  clip-path: circle(0% at 50% 50%);
  border-radius: 70px;
  box-shadow: inset -5px -5px 10px #1d1d1d,
            inset 5px 5px 10px #494949;
}

#topMv .joinBtnWrap a:hover span.wrap:nth-child(2){
  clip-path: circle(100% at 50% 50%);
}

/*-------------------sec-join-----*/

#sec-join .joinBtn a i{
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translate(-8%, -50%);
  z-index: 3;
}

#sec-join .joinBtn a{
  border-radius: 70px;
  background: #333333;
  box-shadow: inset -5px -5px 10px #1d1d1d,
            inset 5px 5px 10px #494949;
  color: #fff;
  display: inline-block;
  font-size: 30px;
  font-size: 3.0rem;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  padding: 55px 20px;
  width: 100%;
  position: relative;
  height: 80px;
}

#sec-join .joinBtn a span.wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sec-join .joinBtn a span.wrap:nth-child(2){
  background: #222222;
  overflow: hidden;
  z-index: 2;
  transition: 1s;
  clip-path: circle(0% at 9% 50%);
  border-radius: 70px;
  box-shadow: inset -5px -5px 10px #1d1d1d,
            inset 5px 5px 10px #494949;
}

#sec-join .joinBtn a:hover span.wrap:nth-child(2){
  clip-path: circle(200% at 9% 50%);
}

#sec-join .joinBtn a:hover span.wrap:nth-child(2) i{
  color: #000;
}

@media only screen and (min-width: 1921px) {#sec-rule .ruleWrap .slick-next {right: 38.5%;}}
@media only screen and (max-width: 1920px) {#sec-rule .ruleWrap .slick-next {right: 38.5%;}}
@media only screen and (max-width: 1900px) {#sec-rule .ruleWrap .slick-next {right: 38%;}}
@media only screen and (max-width: 1880px) {#sec-rule .ruleWrap .slick-next {right: 37.5%;}}
@media only screen and (max-width: 1860px) {#sec-rule .ruleWrap .slick-next {right: 37%;}}
@media only screen and (max-width: 1840px) {#sec-rule .ruleWrap .slick-next {right: 36.5%;}}
@media only screen and (max-width: 1825px) {#sec-rule .ruleWrap .slick-next {right: 36%;}}
@media only screen and (max-width: 1745px) {#sec-rule .ruleWrap .slick-next {right: 34%;}}
@media only screen and (max-width: 1680px) {#sec-rule .ruleWrap .slick-next {right: 32%;}}
@media only screen and (max-width: 1590px) {#sec-rule .ruleWrap .slick-next {right: 29%;}}
@media only screen and (max-width: 1560px) {#sec-rule .ruleWrap .slick-next {right: 28%;}}
@media only screen and (max-width: 1530px) {#sec-rule .ruleWrap .slick-next {right: 27%;}}
@media only screen and (max-width: 1420px) {#sec-rule .ruleWrap .slick-next {right: 24%;}}
@media only screen and (max-width: 1350px) {#sec-rule .ruleWrap .slick-next {right: 22%;}}
@media only screen and (max-width: 1300px) {#sec-rule .ruleWrap .slick-next {right: 20%;}}
@media only screen and (max-width: 1020px) {#sec-rule .ruleWrap .slick-next {right: 19%;}}
@media only screen and (max-width: 930px) {#sec-rule .ruleWrap .slick-next {right: 18%;}}
@media only screen and (max-width: 1200px) {
#sec-rule .ruleWrap .slick-prev, #sec-rule .ruleWrap .slick-next {
    max-width: 300px;
}
}

@media only screen and (max-width: 1040px) {
#sec-rule .ruleWrap .slick-prev, #sec-rule .ruleWrap .slick-next {
    max-width: 280px;
}
}

@media only screen and (max-width: 1640px) {
#sec-rule .commonIntro {
    max-width: 560px;
    margin-right: 20px;
    width: 100%;
}
}

@media only screen and (max-width: 1520px) {
#sec-rule .commonIntro {
    max-width: 490px;
}
}

@media only screen and (max-width: 1460px) {
#sec-rule .commonIntro {
    max-width: 405px;
}
}

@media only screen and (max-width: 1300px) {
#sec-intro .bgDouble{
	font-size: 20.5rem;
}
#sec-rule .commonIntro {
    max-width: 330px;
}

#sec-rule .pcImg{
	width: 60%;
}
}

@media only screen and (max-width: 1200px) {
#sec-intro .bgDouble {
    font-size: 18.5rem;
}
}
@media only screen and (max-width: 1080px) {
#sec-intro .bgDouble {
    font-size: 15.5rem;
}
}

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 900px) {

}
/*-------------------------------------------------------------for sp----*/
@media only screen and (max-width: 900px) {
.grid {
    border-left: 1px solid rgb(204,204,204,0.1);
    border-right: 1px solid rgb(204,204,204,0.1);
}
.grid::before {
    background: rgb(204,204,204,0.1);
}
.catch {
font-size: 22px;
font-size: 2.2rem;
margin-bottom: 20px;
}
.catchWrap {
    top: 36%;
}
#topMv .bgDouble {
    bottom: 42%;
}
.spMenu {
    right: 10px;
    top: 10px;
}

#topMv .enText {
font-size: 10px;
font-size: 1rem;
}
#topMv .bgDouble {
    left: 10%;
    font-size: 30px;
    font-size: 3.0rem;
}

.clip.circle.focus {
    clip-path: circle(150px at 50% 50%);
}

#topMv .joinBtn {
    position: absolute;
    right: 0px;
    bottom: 20px;
}
#sec-intro .flexBox {
flex-wrap: wrap;
}
.head02 .underline {
    font-size: 21px;
    font-size: 2.1rem;
}
#sec-intro .flexBox .ttlWrap {
    width: 100%;
    margin-bottom: 40px;
}
.head02 .underline::after {
    bottom: 7px;
}
#sec-intro .flexBox .detail {
    margin-left: 0%;
    width: 100%;
}

.text {
    font-size: 14px;
    font-size: 1.4rem;
}
#sec-intro .bgDouble {
    font-size: 77px;
    font-size: 7.7rem;
}
#sec-intro .bodyWrap {
    padding: 60px 0 80px;
}
#sec-trouble .mainImg img {
    object-fit: cover;
    height: 200px;
}
#sec-trouble .bodyWrap {
    padding: 40px 0 60px;
}

.textXl {
    font-size: 22px;
    font-size: 2.2rem;
}
#sec-trouble .blanketInr {
    padding: 15px 0 30px;
    margin-bottom:0px;
}

#sec-trouble .flexBox {
flex-wrap: wrap;
}
#sec-trouble .flexBox .qa {
    margin-right: 0%;
    width: 100%;
    margin-top: 40px;
}
#sec-trouble .flexBox .qa .question p {
    font-size: 15px;
    font-size: 1.5rem;
}
#sec-trouble .flexBox .qa .question p .ftCg {
    font-size: 20px;
    font-size: 2.0rem;
    border-radius: 45px;
    width: 45px;
    height: 45px;
    line-height: 45px;
}
.element {
    width: 300px;
    height: 300px;
}
.elementWrap {
    width: 300px;
}
.elementWrap .no .ftLd {
    font-size: 60px;
    font-size: 6.0rem;
}
.elementWrap .yes {
    z-index: 2;
}

#sec-trouble .flexBox .qa .point {
    font-size: 22px;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

#sec-trouble .bgDouble span {
font-size: 40px;
font-size: 4rem;
left: inherit;
right: 0;
}
#sec-trouble .bgDouble p {
font-size: 40px;
font-size: 4rem;
left: inherit;
right: 2px;
}

#sec-trouble .bgDoubleWrap {
    left: inherit;
    bottom: 10%;
    transform: none;
    right: 0;
}
#sec-solution-intro .solutionHead {
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.5;
}
#sec-solution-intro .borderHead span {
    font-size: 12px;
    font-size: 1.2rem;
    padding-left: 80px;
}
#sec-solution-intro .borderHead span::before {
    width: 70px;
}
#sec-solution-intro .bodyWrap {
    padding: 60px 0 60px;
}
#sec-solution .bodyWrap {
    padding: 40px 0;
}
#sec-solution .bodyWrap .head02 {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1.5;
    margin-bottom: -25px;
}
#sec-solution .bodyWrap .bgDouble span {
font-size: 40px;
font-size: 4rem;
}
#sec-solution .bodyWrap .bgDouble p {
font-size: 40px;
font-size: 4rem;
}

#sec-solution-s01 .bodyWrap,
#sec-solution-s02 .bodyWrap,
#sec-solution-s03 .bodyWrap,
#sec-solution-s04 .bodyWrap{
    padding: 40px 0;
}

.solution .flexBox {
flex-wrap: wrap;
}
.solution .flexBox .detail {
    width: 100%;
}
.commonIntro .head01 {
    font-size: 10px;
    font-size: 1rem;
}

.commonIntro .head02 .ftSer {
    font-size: 22px;
    font-size: 2.2rem;
}
.commonIntro {
    margin-bottom: 30px;
    padding: 15px 0 15px 15px;
}

.solution .itemWrap {
    padding-left: 0;
    width: 100%;
}
.solution .itemWrap .ttl span {
font-size: 16px;
font-size: 1.6rem;
}

.solution .itemWrap .ttl {
    margin-bottom: 20px;
}
.solution .flexBox .imgWrap {
width: 80%;
padding: 30px 0;
margin: 0 auto;
}
.textXs {
    font-size: 10px;
    font-size: 1rem;
}
#sec-solution-s02 .bodyWrap .flexBox .item .img {
    width: 70%;
    margin: 0 auto 10px;
}
#sec-solution-s02 .solution .flexBox .imgWrap {
padding: 30px 0 0 0 ;
}

#sec-solution-s02 .bodyWrap .flexBox .item .ttl span {
font-size: 12px;
font-size: 1.2rem;
}

#sec-solution-s02 .bodyWrap .flexBox .item ul li {
    width: 100%;
}
#sec-solution-s02 .bodyWrap .flexBox .item {
    margin: 0;
    width: 48%;
}
#sec-solution-s02 .bodyWrap .flexBox .item ul li p {
    font-size: 14px;
    font-size: 1.4rem;
    border-radius: 50px;
    padding: 8px 10px;
}
#sec-solution-s02 .bodyWrap .flexBox .item ul .fas.fa-check-circle {
    margin-right: 5px;
}

#sec-solution-s02 .bodyWrap .flexBox .item ul li p.textXs {
    font-size: 10px;
    font-size: 1rem;
}
#sec-solution-s03 .flexBox {
    margin-bottom: 0;
}
#sec-solution-s03 ul li {
width: 100%;
padding: 30px 20px;
}
#sec-solution-s03 ul li .flexPoint {
    margin-bottom: 25px;
}
#sec-solution-s03 ul li .flexPoint .pTtl {
    font-size: 15px;
    font-size: 1.5rem;

}
#sec-solution-s03 ul li .text {
    font-size: 12px;
    font-size: 1.2rem;
}
#sec-solution-s03 ul li:nth-of-type(2) {
    margin-top: 20px;
}
#sec-solution-s03 ul li:nth-of-type(3) {
    margin-top: 20px;
}
#sec-solution-s03 ul li:nth-of-type(4) {
    margin-top: 20px;
}
#sec-solution-s04 .blanket {
    margin: 0 auto;
    width: 100%;
}

#sec-solution-s04 .bodyWrap .flexBox {
    margin-bottom: 10px;
}
#sec-solution-s04 .blanket .ftPd {
    font-size: 60px;
    font-size: 6rem;
}
.textL {
    font-size: 16px;
    font-size: 1.6rem;
}

#sec-solution-s04 .blanket .ttl {
    font-size: 12px;
    font-size: 1.2rem;
    margin-bottom: 40px;
}
#sec-think .bodyWrap {
    padding: 60px 0;
}
#sec-think .head01 {
    font-size: 12px;
    font-size: 1.2rem;
    margin-bottom: 15px;
}
#sec-think .flexBox {
flex-wrap: wrap;
margin-bottom: 20px;
}
#sec-think .flexBox .head02 {
    width: 100%;
}

#sec-think .flexBox .text {
    width: 100%;
}

#sec-think .videoBg {
    width: 230%;
}

#sec-think .swiper {
margin-bottom: 40px;
}
#sec-think .swiper-wrapper {
    left: -20px;
}
#sec-think .btmText {
    width: 100%;
}

#sec-think .btmText .underlineTtl span {
line-height: 1.7;
font-weight: 600;
font-size: 16px;
font-size: 1.6rem;
}
#sec-think .btmText .underlineTtl {
    margin-bottom: 20px;
}

#sec-rule .flexBox {
flex-wrap: wrap;
}
#sec-rule .bodyWrap {
padding: 40px 0 100px;
}
#sec-rule .ruleWrap {
    margin-top: 0;
}
#sec-rule .flexBox .detail {
    height: auto;
    max-width: 100%;
    width: 100%;
}
#sec-rule .pcImg {
display: none;
}
#sec-rule .ruleWrap .slick-prev, #sec-rule .ruleWrap .slick-next {
	max-width: 47%;
    height: 50px;
}

#sec-rule .ruleWrap .slick-prev::before {
    font-size: 12px;
    font-size: 1.2rem;
}
#sec-rule .ruleWrap .slick-next::before {
    font-size: 12px;
    font-size: 1.2rem;
}
#sec-rule .ruleWrap .slick-prev {
    left: 0;
}
#sec-rule .ruleWrap .slick-next {
    right: 0;
    left: inherit;
}
#sec-rule .ruleWrap .slick-prev i {
    left: 14%;
    top: 47%;
    font-size: 12px;
}
#sec-rule .ruleWrap .slick-next i {
    right: 14%;
    top: 47%;
    font-size: 12px;
}
#sec-rule .flexBox .detail .item {
    padding-left: 20px;
}
#sec-rule .flexBox .detail .black {
    margin-bottom: 20px;
}
#sec-rule .flexBox .detail .item .lineTtl {
font-size: 16px;
font-size: 1.6rem;
line-height: 2.2;
}
#sec-rule .flexBox .detail .item .lineTtl b::after {
top: -18px;
}
#sec-rule .ruleWrap {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
}
#sec-rule .commonIntro {
    margin-bottom: 30px;
}
#sec-rule{
background: #f2f2f2;
}
#sec-wanted .bodyWrap {
    padding: 60px 0 130px;
}

#sec-wanted .bodyWrap .flexBox {
flex-wrap: wrap;
}
#sec-wanted .bodyWrap .flexBox .detail {
    width: 100%;
}
#sec-wanted .bodyWrap .flexBox .detail .head02 {
    margin-bottom: 30px;
}
#sec-wanted .bodyWrap .flexBox .detail .head03 .headText {
font-size: 16px;
font-size: 1.6rem;
}
#sec-wanted .bodyWrap .flexBox .detail .head03 {
    justify-content: center;
    margin-bottom: 25px;
}
#sec-wanted .bodyWrap .bgDouble p,
#sec-wanted .bodyWrap .bgDouble span{
    font-size: 80px;
    font-size: 8rem;
}

#sec-wanted .bodyWrap .flexBox .img {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
}

#sec-wanted .bodyWrap .flexBox {
    margin-bottom: 40px;
}

.head04 {
font-size: 16px;
font-size: 1.6rem;
    padding: 5px 0 8px 15px;
}

#sec-wanted .bodyWrap .flexBox ul li .bold::before {
    left: -20px;
    height: 10px;
    width: 10px;
}

#sec-wanted .bodyWrap .flexBox ul {
    padding-left: 20px;
}
#sec-wanted .bodyWrap .profile {
    padding: 20px;
    margin-right: 20px;
}
#sec-wanted .bodyWrap .profile .flexBox .detail .info span {
    font-size: 12px;
    font-size: 1.2rem;
padding: 0;
border: none;
margin-right: 0;
}
#sec-wanted .bodyWrap .profile .flexBox .detail .info span:after {
content: ":";
}
#sec-wanted .bodyWrap .profile .flexBox .detail .info p {
    display: inline-block;
    font-size: 12px;
    font-size: 1.2rem;
    margin-right: 10px;
}

#sec-wanted .bodyWrap .profile .flexBox {
    margin-bottom: 15px;
    padding-bottom: 15px;
}

#sec-wanted .bodyWrap .profile .textS {
    font-size: 12px;
    font-size: 1.2rem;
}

#sec-wanted .bodyWrap .profile ul li .ttl {
    font-size: 15px;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

#sec-wanted .bodyWrap .profile ul li {
    margin-bottom: 15px;
}
#sec-wanted .bodyWrap .profile .flexBox .detail .name {
    margin-bottom: 0;
}
#sec-wanted .bodyWrap .profileWrap .slick-prev {
    left: 64%;
    width: 60px;
    height: 60px;
    top: 105%;
}

#sec-wanted .bodyWrap .profileWrap .slick-next {
    left: inherit;
    right: 5%;
    width: 60px;
    height: 60px;
    top: 105%;
}

#sec-req .bodyWrap {
    padding: 60px 0 30px;
}
#sec-req .bodyWrap .top .head01 {
    font-size: 22px;
    font-size: 2.2rem;
    margin-bottom: 40px;
    line-height: 1.5;
}
#sec-req .bodyWrap .top .whiteCircle {
    margin: 0 auto 10px;
}

#sec-req .bodyWrap .top .topText {
    font-size: 14px;
    font-size: 1.4rem;
    text-align: left;
}
#sec-req .bodyWrap .top {
    margin-bottom: 60px;
}

#sec-req .bodyWrap .headWrap {
    margin-bottom: 40px;
}
#sec-req .bodyWrap .flexBox {
flex-wrap: wrap;
}
#sec-req .bodyWrap .flexBox li {
    width: 100%;
}
#sec-req .bodyWrap .flexBox li:nth-of-type(1) {
    margin-right: 0;
}
#sec-req .bodyWrap .flexBox li dl dt p {
    border-left: none;
    padding-left: 0;
}
#sec-req .bodyWrap .flexBox li dl {
    margin-bottom: 30px;
}
#sec-req .bodyWrap .flexBox li dl dd .bold {
    font-size: 14px;
    font-size: 1.4rem;
}

#sec-req .bodyWrap .flexBox li dl dd {
    font-size: 12px;
    font-size: 1.2rem;
    width: 65%;
}

#sec-req .bodyWrap .headWrap .head02 {
    font-size: 20px;
    font-size: 2rem;
}
#sec-join .joinBtn {
    margin: 0 auto 10px;
    width: 100%;
}
#sec-join .flexBox {
flex-wrap: wrap;
}
#sec-join .bgDouble span,
#sec-join .bgDouble p{
    font-size: 50px;
    font-size: 5rem;
}
#sec-join .joinBtn a {
    border-radius: 70px;
    font-size: 20px;
    font-size: 2.0rem;
    padding: 40px 20px;
    height: auto;
}
#sec-join .bodyWrap {
    padding: 50px 0 40px;
}
#sec-join .bgDoubleWrap {
    margin-bottom: 60px;
}
#footer {
    padding-top: 0px;
}
#copyright {
    padding: 40px 0;
}
#spNav .logo {
    margin: 0 auto;
}
#header .hdInr {
    width: 90%;
}
.logoArea {
    margin: 0 auto 10px;
    width: 50%;
}
#spNav .snInr nav {
    width: 90%;
    margin: 0 auto;
}
#spNav .logoText {
text-align: center;
margin-bottom: 40px;
}
#spNav .snInr nav ul li a {
flex-wrap: wrap;
}
#spNav .snInr nav ul li a .ttl {
    font-size: 15px;
    font-size: 1.5rem;
}
#spNav .snInr nav ul li a .sec {
    padding: 0;
    width: 100%;
    margin-bottom: 5px;
}
#spNav .snInr nav ul li a .sec p {
    font-size: 12px;
    font-size: 1.2rem;
}
#spNav .snInr nav ul li a .sec p .ftPd {
    font-size: 16px;
    font-size: 1.6rem;
}
#spNav .entryWrap {
    margin-top: 40px;
}
}

@media only screen and (max-width: 360px) {
.catch {
    font-size: 21px;
    font-size: 2.1rem;
    margin-bottom: 20px;
}
}