@charset "utf-8";

#wrapper{ min-width: 0; }
html{ font-size: 17px; }
body, p, div{ color: #231815; line-height: 1.5; }
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: #faebeb; }
#main .side-view01 .side-liquid{ position: fixed; width: calc((100% - 450px) / 2); min-width: 250px; max-width: 400px; 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; padding-top: 43px; }
#main .side-view01 .side-liquid .txt-body{ width: 100%; position: absolute; right: 0; top: 50%; padding: 0 5%; box-sizing: border-box; transform: translateY(-50%); }
#main .side-view01 .side-liquid .txt-body .ttl{ width: 100%; }
#main .side-view01 .side-liquid .txt-body .ttl img{ width: 100%; height: auto; }
#main .side-view02{ flex: 1; background-color: #faebeb; }
#main .side-view02 .side-liquid{ position: fixed; width: calc((100% - 450px) / 2); min-width: 250px; max-width: 400px; height: 100vh; left: 0; top: 0; margin-left: calc(((100% - 450px) / 2) + 450px); overflow-y: auto; display: flex; display: -ms-flex; align-items: center; justify-content: center; }
#main .side-view02 .side-liquid .inner-body{ padding: 21.621% 7%; width: 100%; box-sizing: border-box; color: #ffffff; margin: auto; }
#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: 7px; position: relative; padding-left: 10px; }
#main .side-view02 .side-liquid .inner-body .etc-list .item::before{ content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px; background-color: #000000; margin-top: 10px; border-radius: 50%; }
#main .side-view02 .side-liquid .inner-body .etc-list .item a{ color: #333333; text-decoration: none; font-size: 12px; line-height: 1.5; }
#main .content{ overflow: hidden; background: #ffffff; width: 100%; padding: 0; position: relative; width: 450px; }
#main .content img{ width: 100%; max-width: auto; height: auto; }


@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%; }
}