@charset "utf-8";

/* ------------------------------------------------------------ common */
:root{
	--sky: #cffaff;
	--blue: #00b4db;
	--orange: #ff8c4e;
	--green: #88ca78;
	--cRadious: 15px;
}

body{ position: relative; font-family: "fot-rodin-pron", sans-serif; font-weight: 600; font-style: normal; color: #343431; }
body:before{ position: fixed; content: ""; width: 100%; height: 100%; background: linear-gradient(342deg,rgba(252, 255, 206, 1) 0%, rgba(175, 252, 255, 1) 100%);  }
main{ padding: 65px 0 0; background: #fff; }
img{ width: 100%; height: auto; }
a{ color: var(--blue) !important; }
a:hover{ opacity: 0.8; }

#wrapper{ overflow: hidden; position: relative; width: 375px; margin: 0 auto; box-sizing: content-box; background: #fff; }
.inner{ width: 95%; margin: 0 auto; }
.flex{ display: flex; }

.fot{ font-family: "fot-seurat-pron", sans-serif; font-weight: 600; font-style: normal; }
.kozuka{ font-family: "kozuka-gothic-pr6n", sans-serif; font-weight: 400; font-style: normal; }
.text{ font-feature-settings: "palt"; font-size: 13px; line-height: 1.7; text-align: center; }
.text-color{ color: var(--blue); }
.text-l{ text-align: left; }
.text a{ display: inline-block; border-bottom: 1px solid; font-size: 10px; }
.text strong{ font-size: 16px; line-height: 2; }
.text small{ font-size: 10px; }
.caption{ padding: 10px 0 0; font-size: 13px; text-align: center; color: var(--blue); }

.line{ padding: 5px; background: #ffe88e; }

.btns{ }
.btns a{ display: flex; align-items: center; justify-content: center; }
.btns img{ width: 100%; height: auto; }
.b-card{ width: 60%; height: 60px; margin: 0 auto; padding: 15px 10px; text-align: center; color: #fff!important; font-size: 19px; border: 1px solid #fff; border-radius: 5px; filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.2)); }
.b-circle{ padding: 13px 5px;  border-radius: 100px; border: 2px solid var(--blue); font-size: 13px; }
.b-circle small{ font-size: 10px; }
.b-circle span{ font-size: 12px; font-family: toppan-bunkyu-midashi-go-std, sans-serif; font-weight: 900; font-style: normal; }
.b-orange{ background: #ff582b; }
.b-blue{ background: var(--blue); }
.marker{ background: linear-gradient(transparent 50%, #fff460 50%); }

.contact-btn a{ display: block; width: 65%; margin: 0 auto; }

.iframe-wrapper{ margin: 0 0 20px; z-index: 1; position: relative; border: 1px solid #ccb4a8; border-radius: var(--cRadious); position: relative; padding-bottom: 56.25%; height: 0; }
.iframe-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 13px; }

.c-title{ margin: 0 0 10px; padding: 5px; font-size: 13px; text-align: center; color: #fff; background: var(--blue); }
.c-title2{ margin: 0 0 15px;  color: var(--blue); text-align: center; font-size: 29px; }
.c-lead{ font-size: 13px; text-align: center; line-height: 1.7; }
.c-img{ display: block; height: auto; margin: 0 auto; }

.c-list{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 35px 0 30px; }
.c-list li{ width: 38%; }
.c-list li:first-of-type{ width: 110px; }
.c-list a{ display: inline-block; width: 100%; padding: 10px 0 5px; font-size: 10px; text-align: center; border-bottom: 1px solid var(--blue); }

.c-list__child{ display: none; width: 80%; margin: 0 auto 30px; }
.c-list__child p { font-size: 11px; line-height: 2; font-feature-settings: 'palt'; }
.c-list__child small { display: block; padding: 20px 0 0; font-size: 10px; color: #989898; line-height: 1.7; }


/* ------------------------------------------------------------ header */
header{ transition: all .8s; z-index: 300; position: fixed; top: 0; left: 50%; translate: -50% 0; width: 376px; padding: 17px 25px 13px; font-size: 12px; background: #f2feff; filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.2)); }
header.scroll-nav{ transition: all .8s; background: #fff; }
header .h_inner{ display: flex; align-items: center; justify-content: space-between; }

header h1{ width: 65%; }
header .navigation{ width: 80%; display: flex; align-items: center; justify-content: flex-end; }
header .sns{ display: flex; align-items: center; gap: 10px; padding: 0 7% 0 0; }
header .sns a{ display: block; width: 30px; }

nav{ padding-right: 15px; }
nav a{ padding: 0 7px; font-size: 12px; color: #ff582b!important; font-family: "fot-seurat-pron", sans-serif; font-weight: 600; font-style: normal; }

.burger-btn{ z-index: 300; position: relative; width: 30px; height: 25px; }
.burger-btn span{ transition: all 0.8s; position: absolute; left: 0; width: 100%; height: 2px; background: #ff582b; }
.burger-btn span:first-of-type{ top: 0; }
.burger-btn span:nth-of-type(2){ top: 45%; }
.burger-btn span:last-of-type{ top: 90%; }

.burger-content{ z-index: 250; transition: all 0.8s; transform: translate(-50%,0); position: fixed; top: 0; left: 50%; width: 376px; height: 100vh; opacity: 0; visibility: hidden; background: var(--sky); padding: 100px 30px; }
.burger-content a{ display: block; margin: 0 0 25px; }
.burger-content .nav{ border-bottom: 1px solid var(--blue); }
.burger-content .h_footer{ padding: 25px 0 0; }


/* active */
.burger-btn.active span{ transition: all 0.8s; }
.burger-btn.active span:first-of-type{ top: 45%; rotate: 45deg; }
.burger-btn.active span:nth-of-type(2){ opacity: 0; }
.burger-btn.active span:last-of-type{ top: 45%; rotate: -45deg; }

.burger-content.active{ transition: all 0.8s; opacity: 1; visibility: visible; }

aside{ z-index: 100; position: fixed; bottom: 0; left: 50%; translate: -50% 0; width: 375px; padding: 5px; background: rgba(255,255,255,0.6); }
aside{ transition: all 0.4s; opacity: 0; visibility: hidden; }
aside.active{ opacity: 1; visibility: visible; }

aside img{ width: 100%; height: auto; }


/* ------------------------------------------------------------ footer */
footer{ position: relative; padding: 60px 0 150px; background: var(--sky); }

.f-nav{ gap: 50px; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; width: 85%; margin: 0 auto 70px; }
.f-nav a{ color: var(--blue)!important; font-size: 14px; font-family: "fot-seurat-pron", sans-serif; font-weight: 600; font-style: normal; } 
.f-logo{ width: 120px; margin: 0 auto; }



/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {

	#wrapper{ width: 100%; }
	

/* ------------------------------------------------------------ header */
	header,
	aside{ width: 100%; }
	.burger-content{ width: 100%; }


/* ------------------------------------------------------------ footer */




}