@charset "utf-8";

#wrapper{ min-width: 0; }
html{ font-size: 17px; line-height: 1.4; }
img{ max-width: 100%; height: auto; }
#main p,#main div{ font-family: 'YakuHanJP','Noto Sans JP', "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; }
#header{ position: relative; z-index: 1000; background-color: #ffffff; padding: 5px 0; }
#header .logo{ width: 200px; }
#header .logo a{ display: block; line-height: 0; }
#footer{ position: relative; z-index: 950; background-color: #ffffff; overflow: hidden; }
#footer aside{ display: none; }
#footer .footer-navi{ width: auto; }
#footer .copyright{ width: auto; }
#footer .footer-navi > .item{ margin-right: 25px; }
#footer .footer-navi > .item+.item{ margin-left: 0; }
#footer .footer-navi-frame{ padding: 0 25px; }
#footer .copyright{ width: auto; padding-left: 25px; padding-right: 25px; }
@media screen and (max-width: 1050px){ /*1050px以下のcss*/
	#header .logo{ left: 0; margin-left: 25px; }
}
@media screen and (max-width: 480px){ /*480px以下のcss*/
	#header .logo{ margin-left: 5%; }
	#footer .footer-navi-frame{ padding: 0; }
	#footer .copyright{ padding-left: 0; padding-right: 0; }
	#footer .footer-navi > .item{ margin-right: 0; }
	#footer .footer-navi > .item+.item{ margin-left: 0; }
}
@media screen and (max-width: 450px){ /*450px以下のcss*/
	html{ font-size: 3.7777vw; }
}



/*-------------------------------*/


#main{ display: flex; display: -ms-flex; background: transparent; }
#main .side-view01{ flex: 1; /*background-color: #d00;*/ }
#main .side-view01 .side-liquid{ position: fixed; width: 544px; height: 100vh; right: 0; top: 0; margin-right: calc(((100% - 450px) / 2) + 450px); background: url(../image/common/p01.webp) center 0 no-repeat; background-size: cover; }
#main .side-view01 .side-liquid .txt-body{ width: 45.9559%; position: absolute; right: 0; top: 0; margin: 19.3015% 18.3823% 0 0; }
#main .side-view01 .side-liquid .txt-body .ttl{ width: 100%; }
#main .side-view01 .side-liquid .txt-body .date{ width: 65.6%; margin: 3% auto 0; }
#main .side-view01 .side-liquid .txt-body .txt{ width: 62%; margin: 6% auto 0; }
#main .side-view02{ flex: 1; /*background-color: #00d;*/ }
#main .side-view02 .side-liquid{ position: fixed; width: 544px; height: 100vh; left: 0; top: 0; margin-left: calc(((100% - 450px) / 2) + 450px); overflow-y: scroll; }
#main .side-view02 .side-liquid .inner-body{ padding: 21.621% 0 33.0882% 16.4632%; width: 100%; box-sizing: border-box; color: #ffffff; background: url(../image/common/p02.webp) center 0 no-repeat; background-size: cover; min-height: 100vh; }
#main .side-view02 .side-liquid .inner-body .guide-body{ margin-top: 20px; }
#main .side-view02 .side-liquid .inner-body .guide-body .head{ font-size: 12px; line-height: 1.5; color: #a0e1e2; position: relative; padding-left: 16px; }
#main .side-view02 .side-liquid .inner-body .guide-body .head::before{ content: ""; width: 11px; height: 11px; background-color: #a0e1e2; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
#main .side-view02 .side-liquid .inner-body .guide-body .list-item{ padding-left: 16px; position: relative; }
#main .side-view02 .side-liquid .inner-body .guide-body .list-item::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 100%; padding-top: 10px; box-sizing: content-box; background-color: #a0e1e2; margin-left: 5px; }
#main .side-view02 .side-liquid .inner-body .guide-body .list-item .item{ margin-top: 4px; }
#main .side-view02 .side-liquid .inner-body .guide-body .list-item .item a{ color: #a0e1e2; text-decoration: none; font-size: 12px; }
#main .side-view02 .side-liquid .inner-body .etc-list{ margin-top: 10px; }
#main .side-view02 .side-liquid .inner-body .etc-list .item{ margin-top: 4px; }
#main .side-view02 .side-liquid .inner-body .etc-list .item a{ color: #a0e1e2; text-decoration: none; font-size: 12px; }
#main .content{ overflow: hidden; background: #ffffff; width: 100%; padding: 0; position: relative; width: 450px; }


@media screen and (min-width: 1538px){ /*1538px以上のcss*/
	#main .side-view01 .side-liquid{ width: calc((100% - 450px) / 2); }
	#main .side-view02 .side-liquid{ width: calc((100% - 450px) / 2); left: auto; right: 0; margin-left: 0; }
}
@media screen and (max-width: 480px){ /*480px以下のcss*/
	#main .content{ padding: 0; margin: 0; }
}
@media screen and (max-width: 450px){ /*450px以下のcss*/
	#main .side-view01{ display: none; }
	#main .content{ width: 100%; }
}