@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
/* Thin 100 / Light 300 / Regular 400 / Medium 500 / Bold 700 / Black 900 */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-family: 'Noto Sans JP', sans-serif; font-weight:400; letter-spacing:0.16em; }
body *{ -webkit-text-size-adjust:100%; max-height:999999px; }

header,footer,main,section{ display:block; }

body{
	background:#333F48; color:#FFFFFF;
	position:relative; overflow-x:hidden;
}
a{ color:inherit; }
select{ font-family:inherit; font-weight:inherit; }

img{ vertical-align:top; outline:none; border:none; }
img:not([width]){ max-width:100%; height:auto; }


a.bt{ text-decoration:none; background-color:#508DC5; color:#FFFFFF; transition:all 300ms 0s ease; }
a.bt:hover{ background-color:#71A3D0; opacity:1 !important; }

/* PC */
@media screen and (min-width:768px) {
	.inner{ max-width:968px; margin:0 auto; }
	html{ font-size:10px; line-height:1.6; }
	html[fontsize="-10"]{ font-size:5.0px; }
	html[fontsize="-9"] { font-size:5.5px; }
	html[fontsize="-8"] { font-size:6.0px; }
	html[fontsize="-7"] { font-size:6.5px; }
	html[fontsize="-6"] { font-size:7.0px; }
	html[fontsize="-5"] { font-size:7.5px; }
	html[fontsize="-4"] { font-size:8.0px; }
	html[fontsize="-3"] { font-size:8.5px; }
	html[fontsize="-2"] { font-size:9.0px; }
	html[fontsize="-1"] { font-size:9.5px; }
	html[fontsize="0"]  { font-size:10.0px; }
	html[fontsize="1"]  { font-size:10.5px; }
	html[fontsize="2"]  { font-size:11.0px; }
	html[fontsize="3"]  { font-size:11.5px; }
	html[fontsize="4"]  { font-size:12.0px; }
	html[fontsize="5"]  { font-size:12.5px; }
	html[fontsize="6"]  { font-size:13.0px; }
	html[fontsize="7"]  { font-size:13.5px; }
	html[fontsize="8"]  { font-size:14.0px; }
	html[fontsize="9"]  { font-size:14.5px; }
	html[fontsize="10"] { font-size:15.0px; }
	.sp{ display: none !important; }
	body{ padding-top:193px; }
}

/* SP */
@media screen and (max-width:767px){
	html{ font-size:5px; line-height:1.6; overflow-x:hidden; }
	html[fontsize="-10"]{ font-size:3.0px; }
	html[fontsize="-9"] { font-size:3.2px; }
	html[fontsize="-8"] { font-size:3.4px; }
	html[fontsize="-7"] { font-size:3.6px; }
	html[fontsize="-6"] { font-size:3.8px; }
	html[fontsize="-5"] { font-size:4.0px; }
	html[fontsize="-4"] { font-size:4.2px; }
	html[fontsize="-3"] { font-size:4.4px; }
	html[fontsize="-2"] { font-size:4.6px; }
	html[fontsize="-1"] { font-size:4.8px; }
	html[fontsize="0"]  { font-size:5.0px; }
	html[fontsize="1"]  { font-size:5.2px; }
	html[fontsize="2"]  { font-size:5.4px; }
	html[fontsize="3"]  { font-size:5.6px; }
	html[fontsize="4"]  { font-size:5.8px; }
	html[fontsize="5"]  { font-size:6.0px; }
	html[fontsize="6"]  { font-size:6.2px; }
	html[fontsize="7"]  { font-size:6.4px; }
	html[fontsize="8"]  { font-size:6.6px; }
	html[fontsize="9"]  { font-size:6.8px; }
	html[fontsize="10"] { font-size:7.0px; }
	.pc{ display: none !important; }
	body{ padding-top:67px; }
}

/* #header { */

.over{
	display:block; background:#000000; opacity:0; cursor:pointer;
	position:fixed; left:0; top:0; bottom:0; width:0; z-index:0;
	transition:opacity 300ms 0s ease;
}
.on .over{ width:100vw; opacity:0.6; }

#header{ position:fixed; left:0; top:0; width:100%; z-index:100;}
#header.on{ z-index:101; }
#header a{ text-decoration:none; }
#header ul{ list-style:none; flex-wrap: wrap;}
#header .inner{ position:relative; }
#header .boder{ overflow:hidden; position:absolute; z-index:1; transition:all 300ms 0s ease; }
#header .boder::before{
	display:block; content:"";
	/*background:linear-gradient(to right, #29343A 0%, #29343A 50%, #1E272B 100%);*/
	transition:all 300ms 0s ease;
}
#header .logo{ position:absolute; z-index:3; }
#header .logo a{
	display:block; font-size:0; line-height:0; text-decoration:none;
	background:url("../img/logo.svg") no-repeat center/100%;
}


#header .sns{ position:absolute; z-index:4; display:flex; }
#header .sns a{ display:block; font-size:0; line-height:0; transition:all 300ms 0s ease; }
#header .sns a:hover{ transform:scale(1.3); }
#header .sns a.y{ background:url("../img/sns_y.svg") no-repeat center/100%; }
#header .sns a.f{ background:url("../img/sns_f.svg") no-repeat center/100%; }
#header .sns a.t{ background:url("../img/sns_t.svg") no-repeat center/100%; }
#header .sns a.e{ display:flex; justify-content:center; align-items:center; font-size:2rem; }

#header .sns2{ position:absolute; z-index:0; display:flex; }
#header .sns2 a{ display:block; font-size:0; line-height:0; transition:all 300ms 0s ease; }
#header .sns2 a:hover{ transform:scale(1.3); }
#header .sns2 a.k{ no-repeat center/100%; }

#header .sns3{ position:absolute; z-index:0; display:flex; }
#header .sns3 a{ display:block; font-size:0; line-height:0; transition:all 300ms 0s ease; }
#header .sns3 a:hover{ transform:scale(1.3); }
#header .sns3 a.k{ no-repeat center/100%; }



#header .col{ position:absolute; z-index:4; display:flex; }
#header .col a{ display:block; font-size:0; line-height:1;}
#header .col a:hover{ transform:scale(1.1); }
#header .col a.v{ background:#ececec; text-align:center; display:flex; justify-content:center; align-items:center; font-size:2rem; color:#000;}
#header .col a.s{ background:#ececec; text-align:center; display:flex; justify-content:center; align-items:center; font-size:2rem; color:#000;}

#header .men{ position:absolute; z-index:1; display:flex; font-size:2rem; }

#header .swi{ position:absolute; z-index:4; display:flex; }

#header .nav{ position:absolute; z-index:2; overflow-y:hidden;}
#header .nav_inner{ display:flex; justify-content:flex-start; flex-flow:column; }

#header .nav2{ position:absolute; z-index:2; overflow-y:hidden;}
#header .nav2_inner{ display:flex; justify-content:flex-start; flex-flow:column; }


#header .link{ font-weight:700; }
#header .link a{ color:#FFFFFF; }
#header .link>li>ul>li{ font-weight:500; }
#header .link .ib{ display:inline-block; }

#header .setting-box{ display:flex; justify-content:space-between; align-items:center; }
#header .setting-btn{ display:flex; }
#header .setting-btn a{ display:block; color:#FFFFFF; font-weight:700; }


#header .online a{
	background:#919D9D;
	display:flex; justify-content:center; align-items:center; text-decoration:none; position:relative; width:100%;
}
#header .online a span{
	display:flex; justify-content:center; align-items:center;
	position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
	word-break:keep-all; text-align:center;
	transition:all 300ms 0s ease;
}
#header .online a span::before{ display:block; content:""; background:url("../../common2/img/online.svg") no-repeat center/100%; }
/*
#header .online a span.a{ border:1px solid #FFFFFF; }
#header .online a span.b{ opacity:1; }
#header .online a span.a{ opacity:0; }
#header .online a:hover span.b,
#header .online a.on span.b{ opacity:0; }
#header .online a:hover span.a,
#header .online a.on span.a{ opacity:1; }
*/

.contact_side{ position:relative; z-index:100; }
.contact_side.on{ z-index:101; }
.contact_side .btns{
	display:flex; justify-content:flex-end; flex-flow:row-reverse;
	position:fixed; z-index:1; background:rgba(0,0,0,0.75);
	transition:all 300ms 0s ease;
}
.contact_side .btns a{ display:flex; justify-content:center; align-items:center; flex-flow:column; text-align:center; text-decoration:none; }
.contact_side .btns a[href^="javascript"]{ flex-flow:column; color:#FFFFFF; }
.contact_side .btns a[href^="javascript"]::before{ display:block; content:""; background:url("../img/contact.svg") no-repeat center/100%; }

#pagetop{ position:absolute; left:0; top:0;}

/* PC */
@media screen and (min-width:768px) {
	#header .inner::after { display:block; content:""; position:fixed; top:0; left:0; width:100vw; height:193px; }
	#header .logo{ left:0px; top:49px; }
	#header .logo a{ width:216px; height:52px; }

	#header .logo2{ position:absolute; z-index:3; }
	#header .logo2 a{
		display:block; font-size:0; line-height:0; text-decoration:none;
		background:url("../img/logo＿black.svg") no-repeat center/100%;
	}
	
	#header .logo2{ left:0px; top:49px; }
	#header .logo2 a{ width:216px; height:52px; }

	#header .col{ height:50px; right:-2px; top:10px}
	#header .col a:not(.v){ width:270px; margin-right:5px;}
	#header .col a.v{ font-size:14px; padding:0 10px; }
	#header .col a:not(.s){ width:150px; }
	#header .col a.s{ font-size:14px; padding:0 10px; }
	
	#header .sns{ height:59px; right:-15px; top:calc((69px - 6.9rem) / 4 + 69px); }
	#header .sns a:not(.e){ width:48px; }
	#header .sns a.e{ font-size:14px; padding:0 24px; }

	#header .sns2{ height:150px; right:555px;  background:#333F48; }
	#header .sns2 a:not(.e){ width:1000px; }

	#header .sns3{ height:150px; right:555px; background:whitesmoke; }
	#header .sns3 a:not(.e){ width:1000px; }


#header{
  height: 320px;
  position: fixed;
  top: 0;
  transition: .1s cubic-bezier(.4, 0, .2, 1);
  width: 100%;
  z-index: 100;
  
}

.head-animation {
  transform: translateY(-100%);
}




	#header .swi{ font-size:14px; height:50px; right:560px; top:95px}
	
	#header .nav{ display:block; top:134px; left:0; right:0; overflow-y:visible; background:#333F48; }
		#header .nav2{ display:block; top:134px; left:0; right:0; overflow-y:visible; margin: 0 auto; width:52%; color:#000; }
	#header .link{ display:flex; justify-content:flex-start; width:100%;font-size:1.8rem; line-height:1.2; font-weight:400; text-align:center;}
	#header .link>li{ display:flex; flex-wrap: wrap; align-items:center; height:60px; word-break:keep-all; background:#29343A; margin: 3px;  width: 32.7%; display: flex; /*flexboxの指定*/
		justify-content: center;  /*中央寄せ*/}
	#header .link>li:hover>a{ color:#59B0FF; font-weight:500;}


	#header .link2{ display:flex; justify-content:flex-start; width:100%;font-size:1.8rem; line-height:1.2; font-weight:400; text-align:center;}
	#header .link2>li{ display:flex; flex-wrap: wrap; align-items:center; height:60px; word-break:keep-all; background:#fff; margin: 3px;  width: 32.7%;  display: flex; /*flexboxの指定*/
		justify-content: center;  /*中央寄せ*/}
	#header .link2>li:hover>a{ color:#59B0FF; font-weight:500;}

	#header .link2>li +li{
    border-left: 1px 　　/* ここがボーダー線指定しているところ */
    padding: 5px 10px 5px 10px;　　　　 /* メニューとボーダー線の間の距離感 */
}


	#header .link>li:hover div{ height:90px; }
	#header .link>li ul{ display:table; width:100%; height:100%; }
	#header .link>li ul li{ display:table-cell; }
	#header .link>li ul li:not(:last-child){ border-right:1px solid #000000; }
	#header .link>li ul li>p{ display:table; width:100%; height:100%; }
	#header .link>li ul li>p>*{ display:table-cell; text-align:center; vertical-align:middle; color:#000000; font-weight:400; padding:0 10px; }
	#header .link>li ul li>p:hover{ background:#59B0FF; }
	#header .link>li ul li>p:hover>*{ color:#FFFFFF; font-weight:500; }


	#header .link2>li:hover div{ height:90px; }
	#header .link2>li ul{ display:table; width:100%; height:100%; }
	#header .link2>li ul li{ display:table-cell; }
	#header .link2>li ul li:not(:last-child){ border-right:1px solid #000000; }
	#header .link2>li ul li>p{ display:table; width:100%; height:100%; }
	#header .link2>li ul li>p>*{ display:table-cell; text-align:center; vertical-align:middle; color:#000000; font-weight:400; padding:0 10px; }
	#header .link2>li ul li>p:hover{ background:#59B0FF; }
	#header .link2>li ul li>p:hover>*{ color:#FFFFFF; font-weight:500; }




	#header .fontsize{ position:absolute; right:265px; top:calc((85px - 8.5rem) / 4 + 85px); z-index:4; display:flex; align-items:center; font-size:1.4rem; }
	#header .fontsize .setting-btn{ margin-left:10px; border:1px solid #FFFFFF; border-left:none; }
	#header .fontsize .setting-btn a{ display:flex; justify-content:center; align-items:center; width:2.7rem; height:1.7rem; min-width:27px; min-height:17px; border-left:1px solid #FFFFFF; box-sizing:content-box; }
	html:not([fontsize^="-"]) #header .setting-btn a[data-fontsize="1"],
	html[fontsize^="-"] #header .setting-btn a[data-fontsize="-1"]{ background:#FFFFFF; color:#333F48; }
	
	.contact_side .btns{ left:calc(-209px * 4 - 3px); bottom:176px; }
	.contact_side.on .btns{ left:0; }
	.contact_side .btns a{ font-size:2.0rem; line-height:1.6; width:209px; height:130px; }
	.contact_side .btns a .s{ font-size:1.4rem; line-height:1.8; }
	.contact_side .btns a:not(.f){ margin-left:1px; }
	.contact_side .btns a[href^="javascript"]{ font-size:1.6rem; line-height:1.0; width:130px; }
	.contact_side .btns a[href^="javascript"]::before{ width:22px; height:22px; margin-bottom:15px; }
	.contact_side .btns .close{ display:none; }
}

/* SP */
@media screen and (max-width:767px){
	#header .inner{ height:67px; background:#333F48; }
	#header .boder{ width:calc(100vw - 165px); height:36px; right:0; top:31px; }
	#header .boder::before{ width:200vw; height:36px; margin-left:0; }
	#header .logo{ left:20px; top:20px; }
	#header .logo a{ width:135px; height:33px; }

	#header .logo2{ position:absolute; z-index:3; 
		display:block; content:""; }
	#header .logo2 a{
		display:block; font-size:0; line-height:0; text-decoration:none;
		background:url("../img/logo.svg") no-repeat center/100%;

	}
	#header .logo2{ left:20px; top:20px; }
	#header .logo2 a{ width:135px; height:33px; }


	#header .open{ position:absolute; z-index:3; width:calc(100vw - 165px); height:36px; right:0; top:31px; }
	#header .open a{ position:relative; display:block;  width:77px; height:36px; float:right; }
	#header .open a i{
		position:absolute; z-index:2; background:#FFFFFF;
		transform-origin:center;
		transition:all 300ms 0s ease;
		width:37px; height:1px;
	}
	#header .open a i:nth-child(1){ right:20px; top:14px; }
	#header .open a i:nth-child(2){ right:20px; top:18px; }
	#header .open a i:nth-child(3){ right:20px; top:22px; }
	#header.on .open a i{ width:19px; right:29px; top:24px; }
	#header.on .open a i:nth-child(1){ width:0px; }
	#header.on .open a i:nth-child(2){ transform:rotate(-45deg); }
	#header.on .open a i:nth-child(3){ transform:rotate(-135deg); }


	#header .men{ height:20px; right:20px; top:30px; }

	#header .swi{ height:36px; right:140px; top:40px; }
	
	#header .sns{ height:36px; right:60px; top:31px; }
	#header .sns a{ width:29px; }


	#header .nav{
		width:calc(100vw - 85px); height:0;
		overflow-y:auto;
		right:0; top:67px; background:#29343A;
		transition:all 300ms 0s ease;
	}
	#header.on .nav{ height:calc(130vh - 67px); }
	#header .link{ padding-top:25px; } 
	#header .link>li>a{
		display:block; background:#333F48;
		padding:10px; margin-bottom:3px;
		font-size:3.2rem; line-height:1.6;
		position:relative;
	}
	#header .link>li>a[href^="javascript"]::before,
	#header .link>li>a[href^="javascript"]::after{
		display:block; content:""; background:#FFFFFF;
		width:13px; height:1px;
		position:absolute; right:30px; top:50%;
		transition:all 300ms 0s ease;
	}
	#header .link>li>a[href^="javascript"]::after{ transform:rotate(90deg); }
	#header .link>li.on>a[href^="javascript"]::after{ transform:rotate(0); }
	#header .link>li ul>li a{
		display:flex; align-items:center; height:0; overflow:hidden;
		font-size:2.8rem; line-height:1.6;
		padding:0 20px 0 40px;
		transition:all 300ms 0s ease;
	}
	#header .link>li.on ul>li a{ height:50px; }
	#header .link>li.on ul>li a[href="tel:0570003487"]{ height:100px; }


	#header .nav2{
		width:calc(100vw - 85px); height:0;
		overflow-y:auto;
		right:0; top:67px; background:whitesmoke;
		transition:all 300ms 0s ease;
	}
	#header.on .nav2{ height:calc(100vh - 67px); }
	#header .link2{ padding-top:25px; } 
	#header .link2>li>a{
		display:block; background:whitesmoke;
		padding:10px; margin-bottom:3px;
		font-size:3.2rem; line-height:1.6;
		position:relative;
	}
	#header .link2>li>a[href^="javascript"]::before,
	#header .link2>li>a[href^="javascript"]::after{
		display:block; content:""; background:#FFFFFF;
		width:13px; height:1px;
		position:absolute; right:30px; top:50%;
		transition:all 300ms 0s ease;
	}
	#header .link2>li>a[href^="javascript"]::after{ transform:rotate(90deg); }
	#header .link2>li.on>a[href^="javascript"]::after{ transform:rotate(0); }
	#header .link2>li ul>li a{
		display:flex; align-items:center; height:0; overflow:hidden;
		font-size:2.8rem; line-height:1.6;
		padding:0 20px 0 40px;
		transition:all 300ms 0s ease;
	}
	#header .link2>li.on ul>li a{ height:50px; }
	#header .link2>li.on ul>li a[href="tel:0570003487"]{ height:100px; }

	#header .snslink{ padding:30px 0px 0px 20px;}
	
	#header .setting-box{ padding:0 25px; height:70px; }


	#header .setting-title{ font-size:2.8rem; }
	#header .setting-btn{ font-size:3.8rem; }
	#header .setting-btn a{ margin-left:28px; }
	html:not([fontsize^="-"]) #header .setting-btn a[data-fontsize="1"],
	html[fontsize^="-"] #header .setting-btn a[data-fontsize="-1"]{ color:#59B0FF; }
	
	#header .online a{ font-size:2.8rem; line-height:1.6; height:90px; }
	#header .online a span::before{ width:24px; height:26px; margin-right:11px; }
	#header .online a span.a{ font-size:4.0rem; width:130px; height:35px; }
	
	.contact_side .btns{ left:-100vw; bottom:100px; }
	.contact_side.on .btns{ left:0; }
	.contact_side .btns a{ font-size:2.2rem; line-height:1.6; height:65px; width:calc(65vw / 3 - 1px); }
	.contact_side .btns a.tel{ width:35vw; }
	.contact_side .btns a .s{ font-size:1.6rem; line-height:1.8; }
	.contact_side .btns a:not(.f){ margin-left:1px; }
	.contact_side .btns a[href^="javascript"]{ font-size:2.4rem; line-height:1.0; width:100px; }
	.contact_side .btns a[href^="javascript"]::before{ width:25px; height:25px; margin-bottom:10px; }
	.contact_side .btns .close{
		display:block; width:22px; height:22px; cursor:pointer;
		position:absolute; right:130px; top:-38px;
		background:url("../img/close.svg") no-repeat center/22px 22px;
	}
}

/* } */

/* #footer { */

#footer{ background:#29343A; color:#FFFFFF; }
.upper{ position:fixed; z-index:100; opacity:0; transition:all 300ms 0s ease; }
.upper.on{ opacity:1; }
.upper::before,
.upper::after{
	display:block; content:""; background:#FFFFFF;
	position:absolute; right:0; top:0;
	transform-origin:center top;
	transition:all 300ms 0s ease;
}
.upper::before{ transform:rotate(45deg); }
.upper::after{ height:100%; }


/* PC */
@media screen and (min-width:768px) {
	#footer{ padding:30px 35px; }
	#footer .link{ font-size:1.4rem; line-height:1.0; margin-bottom:30px; }
	#footer .copy{ font-size:2.0rem; line-height:1.0; text-align:center; }
	.upper{ width:15px; height:106px; right:20px; bottom:-106px; }
	.upper.on{ bottom:87px; }
	.upper:hover{ height:116px; }
	.upper::before{ height:22px; width:1px; }
	.upper::after{ width:1px; }
}

/* SP */
@media screen and (max-width:767px){
	#footer{ padding:25px; }
	#footer .link{ font-size:2.0rem; line-height:1.0; margin-bottom:25px; }
	#footer .copy{ font-size:2.8rem; line-height:1.0; text-align:center; }
	.upper{ width:20px; height:72px; right:10px; bottom:-72px; }
	.upper.on{ bottom:35px; }
	.upper:hover{ height:90px; }
	.upper::before{ height:14px; width:1px; }
	.upper::after{ width:1px; }
}
/* } */

/* #main { */

#main a{ transition: all 300ms 0s ease; }
#main a:hover{ opacity:0.6; }

p.pan{ color:#AAAAAA; font-weight:400; }

h2.title{ text-align:center; font-weight:300; letter-spacing:0.09em; padding-left:0.09em; }
h2.title::after{ display:block; content:""; margin:0 auto; background:#919D9D; }

.read_bt{ display:inline-block; color:#D0B700; text-decoration:none; }
.read_bt::before{ content:"\203a"; font-size:150%; line-height:0; margin:0 0.25em; }

@media screen and (min-width:768px) {
	p.pan{ font-size:1.4rem; line-height:1.6; padding:15px 0; }
	h2.title{ font-size:4.8rem; line-height:1.0; padding:30px 0 80px;  }
	h2.title::after{ width:50px; height:5px; margin-top:27px; }
}

/* SP */
@media screen and (max-width:767px){
	p.pan{ display:none; }
	h2.title{ font-size:5.4rem; line-height:1.0; padding:40px 0;  }
	h2.title::after{ width:25px; height:3px; margin-top:17px; }
}

/* } */

.cp_ipcheck {
	width: 200px;
	margin: 2em 0;
	text-align: left;
}
.cp_ipcheck input {
	display: none;
}
.cp_ipcheck label {
	position: relative;
	display: block;
	padding: 15px 0;
	padding-right: 35px;
	cursor: pointer;
  font-size: 1rem;
}
.cp_ipcheck input[type='checkbox'] {
	position: absolute;
	visibility: hidden !important;
}
.cp_ipcheck input[type='checkbox'] + label:before,
.cp_ipcheck input[type='checkbox'] + label:after {
	position: absolute;
	top: 50%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin-top: -7.5px;
	content: '';
}
.cp_ipcheck input[type='checkbox'] + label:before {
	right: 0;
	width: 60px;
	height: 30px;
	border: 1px solid #e4e3e1;
	border-radius: 30px;
	background: #ffffff;
}
.cp_ipcheck input[type='checkbox'] + label:after {
	right: 29px;
	width: 30px;
	height: 30px;
	-webkit-transition: all 200ms ease-out;
	        transition: all 200ms ease-out;
	border-radius: 50%;
	background: #bdbdbd;
}
.cp_ipcheck input[type='checkbox']:checked + label:after {
	right: 0;
	background: #000066;
  content: "\f186";
  font-family:"Font Awesome 5 Free";
  padding: 6px 0 0 8px;
  color: #ffff00;
}

/* デフォルトはダークモード表示 */

.dark {
  display: block;
}
.light {
  display: none;
}

/* ライトモードのとき */
.js-mode-light {
  color: #000;
  background-color: whitesmoke;
}
.js-mode-light .light {
  display: block;
}
.js-mode-light .dark {
  display: none;
}

/* モード切り替えボタン */
input[type="checkbox"] {
  display: none;
}
.switch {
  position: fixed;

}

@media (min-width:768px) and (max-width:1366px)  {
	.switch{ 
  top: .5em;
  right: .5em;
  font-size: 15px;}

  .switch-mode {
  position: absolute;
  top: -95px;
  right: 550px;
  display: block;
  width: 50px;
  height: 200px;
  transform: rotate(0);
  transition: transform 1s;
}
}


@media screen and (min-width:1367px) {
	.switch{ 
  top: .5em;
  right: .5em;
  font-size: 15px;}

  .switch-mode {
  position: absolute;
  top: -95px;
  right: 900px;
  display: block;
  width: 50px;
  height: 200px;
  transform: rotate(0);
  transition: transform 1s;
}
}

/* SP */
@media screen and (max-width:767px){
	.switch{   
  top: .1em;
  right: .1em;
  font-size: 9px;
  color:#FFFFFF; 
 z-index:4;}

.switch-mode {
  position: absolute;
  top: 57px;
  right: 160px;
display: block;
  width: 50px;
  height: 0px;
  transform: rotate(0);
  transition: transform 1s;
}
}

.switch-label {
  cursor: pointer;
}

/* 月と太陽を対角線上に設置しておく。
   設定したspanを回したら太陽がひっくり返ってしまったので、transform scaleで上下反転した */
.switch-mode::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
}
.switch-mode::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  transform: scale(1,-1);
}



@media screen and (min-width:1367px) {
 /* === ボタンを表示するエリア ============================== */
 .switchArea {
	top: 92px;
	right: 50px;
	line-height    : 22px;                /* 1行の高さ          */
	letter-spacing : 0;                   /* 文字間             */
	text-align     : center;              /* 文字位置は中央     */
	font-size      : 12px;                /* 文字サイズ         */
  
	position       : relative;            /* 親要素が基点       */
	margin         : auto;                /* 中央寄せ           */
	width          : 50px;               /* ボタンの横幅       */
	background     : #fff;                /* デフォルト背景色   */	
  }
  
   /* === チェックボックス ==================================== */
  .switchArea input[type="checkbox"] {
	display        : none;            /* チェックボックス非表示 */
  }
  
   /* === チェックボックスのラベル（標準） ==================== */
  .switchArea label {
	display        : block;               /* ボックス要素に変更 */
	box-sizing     : border-box;          /* 枠線を含んだサイズ */
	height         : 24px;                /* ボタンの高さ       */
	border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  }
  
   /* === チェックボックスのラベル（ONのとき） ================ */
  .switchArea input[type="checkbox"]:checked +label {
	border-color   : #333F48;             /* 選択タブの枠線     */
  }
  
   /* === 表示する文字（標準） ================================ */
  .switchArea label span:after{
	content        : "白";               /* 表示する文字       */
	padding        : 0 0 0 3px;          /* 表示する位置       */
	color          : #333F48;             /* 文字色             */
  }




  
   /* === 丸部分のSTYLE（標準） =============================== */
  .switchArea #swImg {
	position       : absolute;            /* 親要素からの相対位置*/
	width          : 0px;                /* 丸の横幅           */
	height         : 20px;                /* 丸の高さ           */
	background     : #333F48;             /* カーソルタブの背景 */
	top            : 1px;                 /* 親要素からの位置   */
	left           : 1px;                 /* 親要素からの位置   */
  }
  
   /* === 丸部分のSTYLE（ONのとき） =========================== */
  .switchArea input[type="checkbox"]:checked ~ #swImg {
	transform      : translateX(20px);    /* 丸も右へ移動       */
	background     : #333F48;             /* カーソルタブの背景 */
  }

  
  .switchArea label span::before{
	content        : "黒";               /* 表示する文字       */
	padding        : 2px 7px 2px 7px;           /* 表示する位置       */
	color          : #f5f8f7;             /* 文字色             */
	background     : #333F48;             /* カーソルタブの背景 */
  }
 

}





/* SP */
@media screen and (max-width:767px){
	/* === ボタンを表示するエリア ============================== */
	.switchArea {
	   top: -30px;
	   right: -70px;
	   z-index:4; 
	   line-height    : 18px;                /* 1行の高さ          */
	   letter-spacing : 0;                   /* 文字間             */
	   text-align     : center;              /* 文字位置は中央     */
	   font-size      : 10px;                /* 文字サイズ         */
	 
	   position       : relative;            /* 親要素が基点       */
	   margin         : auto;                /* 中央寄せ           */
	   width          : 43px;               /* ボタンの横幅       */
	   background     : #fff;                /* デフォルト背景色   */	
	 }
	 
	  /* === チェックボックス ==================================== */
	 .switchArea input[type="checkbox"] {
	   display        : none;            /* チェックボックス非表示 */
	 }
	 
	  /* === チェックボックスのラベル（標準） ==================== */
	 .switchArea label {
	   display        : block;               /* ボックス要素に変更 */
	   box-sizing     : border-box;          /* 枠線を含んだサイズ */
	   height         : 20px;                /* ボタンの高さ       */
	   border         : 2px solid #999999;   /* 未選択タブのの枠線 */
	 }
	 
	  /* === チェックボックスのラベル（ONのとき） ================ */
	 .switchArea input[type="checkbox"]:checked +label {
	   border-color   : #333F48;             /* 選択タブの枠線     */
	 }
	 
	  /* === 表示する文字（標準） ================================ */
	 .switchArea label span:after{
	   content        : "白";               /* 表示する文字       */
	   padding        : 0 0 0 5px;          /* 表示する位置       */
	   color          : #333F48;             /* 文字色             */
	 }
   
   
   
   
	 
	  /* === 丸部分のSTYLE（標準） =============================== */
	 .switchArea #swImg {
	   position       : absolute;            /* 親要素からの相対位置*/
	   width          : 0px;                /* 丸の横幅           */
	   height         : 18px;                /* 丸の高さ           */
	   background     : #333F48;             /* カーソルタブの背景 */
	   top            : 1px;                 /* 親要素からの位置   */
	   left           : 1px;                 /* 親要素からの位置   */
	 }
	 
	  /* === 丸部分のSTYLE（ONのとき） =========================== */
	 .switchArea input[type="checkbox"]:checked ~ #swImg {
	   transform      : translateX(20px);    /* 丸も右へ移動       */
	   background     : #333F48;             /* カーソルタブの背景 */
	 }
   
	 
	 .switchArea label span::before{
	   content        : "黒";               /* 表示する文字       */
	   padding        : 2px 4px 2px 5px;           /* 表示する位置       */
	   color          : #f5f8f7;             /* 文字色             */
	   background     : #333F48;             /* カーソルタブの背景 */
	 }
	 
   
   
   }