@charset "UTF-8";

/* Font
========================================== */

@font-face {
  font-family: "Montserrat";
  src: url("./font/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("./font/ZenKakuGothicNew-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("./font/ZenKakuGothicNew-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;}


/* Reset
========================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.8}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight: 500;}:where(h1,h2,h3){line-height:calc(1em + 1rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}


/* Base
========================================== */

/* main */
html {
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;}
body {
  margin: 0; padding: 0;
  color: #24211E;
  background: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 100%;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;}
a {
  color: #24211E;
  display: block;
  text-decoration: none;}


/* Utility
========================================== */

/* Font Weight */
.txw-m { font-weight: 500;}
.txw-b { font-weight: 700;}

/* Line Height */
.lh-1 { line-height: 1; }
.lh-12 { line-height: 1.2; }
.lh-14 { line-height: 1.4; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-2 { line-height: 2; }

/* Text Align */
.txa-c { text-align: center;}
.txa-l { text-align: left;}
.txa-r { text-align: right;}

/* Font Size */
.txs-12 { font-size: 0.75rem; }
.txs-14 { font-size: 0.875rem; }
.txs-16 { font-size: 1rem; }
.txs-18 { font-size: 1.125rem; }
.txs-20 { font-size: 1.25rem; }
.txs-24 { font-size: 1.5rem; }
.txs-28 { font-size: 1.75rem; }
.txs-36 { font-size: 2.25rem; }
.txs-42 { font-size: 2.625rem; }
.txs-48 { font-size: 3rem;}
p { font-size: 1rem; }
.en { font-family: "Montserrat"; font-weight: 700;}

/* Display */
.d-pc, .d-pd, .d-pd-sp, .d-sp, .d-pc-inline { display: none; }

/* Layout
========================================== */

.wrap {
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;}
.contents {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;}


/* Media Query
========================================== */

/* PC */
@media screen and (min-width: 769px) {
  .d-pc { display: block;}
  .d-pc-inline { display: inline-block;}
}

/* Tablet */
@media screen and (max-width: 768px) {
  .wrap,.contents { padding: 0 4vw;}
  .txs-18 { font-size: 1.1rem; }
  .txs-20 { font-size: 1.125rem; }
  .txs-24 { font-size: 1.375rem; }
  .txs-28 { font-size: 1.625rem; }
  .txs-36 { font-size: 2rem; }
  .txs-42 { font-size: 2.375rem; }
  .txs-48 { font-size: 2.75rem; }
  .d-pd-sp { display: block;}
  .d-pd { display: block;}}

/* SP */
@media screen and (max-width: 480px) {
  .txs-18 { font-size: 1.1rem; }
  .txs-20 { font-size: 1.125rem; }
  .txs-24 { font-size: 1.25rem; }
  .txs-28 { font-size: 1.5rem; }
  .txs-36 { font-size: 1.75rem; }
  .txs-42 { font-size: 1.85rem; }
  .txs-48 { font-size: 2rem; }
  .d-pd { display: none;}
  .d-sp { display: block;}}


/* Header
========================================== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;}
#header h1 {
  margin-left: 30px;
  height: 42px;
  color:  #004EA2;
  line-height: 42px;}
#header h1 img {
  margin-right: 10px;
  display: inline-block;
  vertical-align: top;
  width: 60px;}
#nav {
  display: flex;
  align-items: center;}
#nav .menu {
  padding: 0 40px;
  align-items: center;
  display: flex;
  gap:10px 40px;}
#nav .menu a {
  line-height: 1.1;
  text-align: center;
  font-weight: 700;}
#nav .link {
  margin-right: 20px;
  display: flex;
  gap: 10px;}
#nav .link a {
  position: relative;
  padding: 0 30px;
  background: #24211E;
  color: #fff;
  border-radius: 30px;
  height: 60px;
  line-height: 60px;
  width: 200px;
  font-weight: 700;}
#nav .link a.link1 { background: #F78C00;}
#nav .link .arrow {
  position: absolute;
  top: 0;
  right: 10px;
  width: 20px;
  height: 60px;}
#nav .link .arrow::before {
	content: "";
  margin: auto;
  position: absolute;
  top: 0;
	bottom: 0;
	left: 0;
  vertical-align: middle;
  width: 8px;
  height: 8px;}
#nav .link .arrow.a-right::before {
  border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);}
#nav .link .arrow.a-down::before {
  border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);}

@media screen and (max-width: 1280px) {
  #nav .menu { gap:10px 20px; padding-right: 20px;}
  #nav .link a { width: 180px; padding-left: 20px;}
  #nav .link a.link2 { width: 160px;}}
@media screen and (max-width: 1080px) {
  #nav .menu { display: none;}}
@media screen and (max-width: 768px) {
  #header { margin-top: 60px; position: absolute;}
  #nav .link { top: 0; left: 0; position: fixed;width: 100%;gap:0;}
  #nav .link a,#nav .link a.link2 { width: 50%;border-radius: 0;}}

/* 共通
========================================== */
a.tourlink {
  margin: 28px 0;
  font-weight: 700;
  background: #F78C00 url("images/arrow-link@2x.png") no-repeat right 15px center;
  background-size: 30px 30px;
  max-width: 400px;
  padding: 12px 20px;
  border-radius: 6px;
  color: #fff;}
a.jukolink {
  margin: 60px 0 0 auto;
  font-weight: 700;
  background: #DE3640 url("images/arrow-link@2x.png") no-repeat right 15px center;
  background-size: 30px 30px;
  max-width: 400px;
  padding: 12px 20px;
  border-radius: 6px;
  color: #fff;}
#footer a.tourlink  { margin: 16px 0 30px;}
#footer a.jukolink  { margin: 16px 0 0;}

@media screen and (max-width: 768px) {
  a.tourlink { letter-spacing: normal;}
  a.jukolink { margin-top: 30px;letter-spacing: normal;}}

@media screen and (max-width: 480px) {
  a.tourlink { font-size: 1rem;}
  a.jukolink { font-size: 1rem;}}
  
/* メインビジュアル
========================================== */
#main {
  background: url("images/back-pc.png") no-repeat top center;
  background-size: 100% auto;}
#main .visual {
  position: relative;
  padding: 120px 0 60px;}
#main .visual .d-pc {
  margin: 0 auto;
  max-width: 1080px;
  position: relative;}
#main .visual img { margin: 0 auto;}
#button {
  position: absolute;
  bottom: 60px;
  right: 20px;
  width: 180px; height: 180px;
  background: #F78D00;
  border-radius: 50%;}
#main .bana {
  width: 100%;
  height: 80px;
  background: #F78D00;
  border-radius: 9999px;}
#main .bana a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;}
#main .bana img {
  max-width: 80%;
  height: auto;}
#main .main-text { padding: 0 0 80px;}
#main .main-text span { color: #F78C00;}
@media screen and (max-width: 768px) {
  #main {
    margin-top: 60px;
    background: url("images/back-sp.png") no-repeat top center;
    background-size: contain;}
  #main .visual { padding: 100px 0 20px;}
  #main .main-text { padding: 10vw 0; text-align: left;}}

/* 悩み
========================================== */
#intro img { width: 100%;}

/* Feature
========================================== */
#feature { position: relative;}
#feature::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  display: inline-block;
  width: 100%;
  height: 120px;
  border-radius: 50% / 100% 100% 0 0;
  background-image: linear-gradient(0deg,#fffbc4,#faf38b);}
#feature .ansin {
  margin: 20px auto;
  background: #FFF34D;
  max-width: 340px;
  text-align: center;
  line-height: 60px;
  border-radius: 10px;}
#feature .flex {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px 30px;}
#feature .flex .item { width: calc(33% - 20px);}
#feature .flex img { margin: 0 auto -2em;}
#feature .flex h3 {
  font-weight: 700;
  line-height: 1.5;
  text-align: center;}
#feature .n1 h3 span { color: #004EA2;}
#feature .n2 h3 span,#feature .flex .n2 p a { color: #00AFCC;}
#feature .n3 h3 span { color: #3AB483;}
#feature .n4 h3 span { color: #DE3640;}
#feature .n5 h3 span { color: #F78C00;}
#feature .n6 h3 span,#feature .flex .n6 p a { color: #C177D3;}
#feature .flex p {
  padding: 10px 30px 4px;
  line-height: 1.5;}
#feature .flex p a {
  text-decoration: underline;
  display: inline;}
#feature .go {
  padding: 90px 0 40px;}
#feature .go img { margin: 10px auto 0;}
#feature .tourintro {
  position: relative;
  z-index: 1;}
#feature .tourintro img {
  margin: 0 auto -40px;}
#feature .tourintro p {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 10px;
  text-align: center;
  background: #FFF34D;}

@media screen and (max-width: 1080px) {
  #feature .flex { flex-wrap: wrap; gap:40px 30px;}
  #feature .flex .item { width: calc(50% - 15px);}}
@media screen and (max-width: 768px) {
  #feature { padding-bottom: 0;}
  #feature::after { height: 60px;}
  #feature .flex .item { width: 100%;}
  #feature .flex p { padding: 10px 20px 4px;}}


/* Tour
========================================== */
#tour {
  padding: 10px 0 140px;
  position: relative;
  background: #fffbc4;}
#tour .frame {
  margin-top: 70px;
  padding-bottom: 100px;
  background: #fff;
  border-radius: 100px;}
#tour h2 span { color: #F78C00;}
#tour h3.point {
  position: relative;
  top: -50px;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  line-height: 100px;
  color: #fff;
  text-align: center;
  background: #F78C00;}
#tour .flex_1 {
  padding-bottom: 60px;
  display: flex;
  gap:30px;}
#tour .flex_1 .item { width: 100%;}
#tour .flex_1 .item img { border-radius: 10px;}
#tour .flex_1 .item p {
  line-height: 1.5;
  padding-top: 20px;}
#tour .flex_2 {
  display: flex;
  justify-content: space-between;
  gap: 20px 60px;}
#tour .flex_2 .left { width: 480px;}
#tour .flex_2 .right { width: 540px;}
#tour .flex_2 h3 { margin-bottom: 10px;}
#tour .flex_2 h3 img {
  position: relative;
  margin-right: 10px;
  top: 2px;
  display: inline-block;}
#tour .flex_2 .left table {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;}
#tour .flex_2 .left table.event {margin-top: 40px;}
#tour .flex_2 .left table th,
#tour .flex_2 .left table td {
  padding: 6px 20px;
  border:1px solid #ccc;}
#tour .flex_2 .left table th {
  width: 90px;
  text-align: center;
  color: #fff;
  background: #F49D43;}
#tour .flex_2 .left table.event th { background: #DE3540;}
#tour .flex_2 .left table td.month {
  width: 80px;
  text-align: center;
  background: #FFD1DD;}
#tour .flex_2 .left table td.time {
  width: 80px;
  text-align: center;
  padding: 4px 10px;
  background: #FAF0BE;}
#tour .flex_2 h4 {
  margin-top: 20px;
  margin-bottom: 4px;}
#tour .flex_2 h4 span {
  margin-right: 12px;
  vertical-align:text-bottom;
  color: #F78C00;}
#tour .flex_2 p { line-height: 1.6;}
#tour .flex_2 p.list { margin-top: 10px;}
#tour .flex_2 p.last span {
  color: #F78C00;
  line-height: 2;
  font-weight: 700;}
#tour .flex_2 p.indent { padding-left: 32px;}
#tour .flex_2 p a {
  text-decoration: underline;
  color: #EF7700;
  display: inline-block;}

@media screen and (max-width: 1080px) {
  #tour .flex_1 { flex-wrap: wrap;justify-content: space-between;}
  #tour .flex_1 .item { width: calc(50% - 15px);}
  #tour .flex_1 .item img {width: 100%;}
  #tour .flex_2 { flex-wrap: wrap; justify-content: center; gap:40px 0;}
  #tour .flex_2 .left, #tour .flex_2 .right { width: 100%;}
  #tour .frame { padding: 0 4vw 10vw; border-radius: 8vw;}
  #tour .flex_2 .left table.event { margin-top: 20px;}}
@media screen and (max-width: 768px) {
  #tour { padding-bottom: 15vw;}
  #tour .flex_1 .item { width: 100%;}
  #tour .frame { padding: 0 2vw 10vw;}
  #tour .flex_1 { margin-top: -20px; padding-bottom: 40px;}
  #tour .flex_2 { gap: 30px;}
  #tour .flex_2 h4 { margin-top: 10px;}}
@media screen and (max-width: 480px) {
  #tour .flex_2 .left table th, #tour .flex_2 .left table td { padding: 4px 10px;}
  #tour .flex_2 .left table.event th { width:60px;}
  #tour .flex_2 .left table th { width: 60px;}}

/* Course
========================================== */
#course {
  position: relative;
  margin-top: 60px;
  background: url("images/course-back-pc.png") no-repeat center top;
  background-size: 100% auto;
  padding: 60px 0 220px;}
#course::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  display: inline-block;
  width: 100%;
  height: 120px;
  border-radius: 50% / 100% 100% 0 0;
  background: #E7D1F0;}
#course h2 {
  margin-bottom: 30px;
  line-height: 1.4;}
#course h2 span {
  display: block;
  color: #00AFCC;}
#course .flex_1 {
  margin: 60px 0 40px;
  gap:0 40px;
  display: flex;}
#course .flex_1 .right,#course .flex_1 .left { width: 100%;}
#course .flex_item {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 40px;}
#course .flex_item a {
  position: relative;
  border-radius: 30px;
  box-shadow: 0 2px 12px #4B769533;
  width: 520px;
  height: 150px;}
#course .item {
  overflow: hidden;
  border-radius: 30px;
  padding-right: 40px;
  gap: 0 40px;
  display: flex;
  align-items: center;}
#course h3 {
  position: relative;
  margin-bottom: 16px;}
#course h3::before {
  margin-right: 8px;
  position: relative;
  top: 2px;
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  border:4px solid #00AFCC;
  border-radius: 50%;}
#course .item .photo img {
  width: 180px;
  height: 150px;
  object-fit: cover;}
#course .item .text { flex: 1;}
#course .item .text p {
  line-height: 1.5;
  padding-top: 6px;
  letter-spacing: normal;}
#course .arrow {
  background: #000;
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;}
#course .arrow::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
	bottom: 0;
  left: 10px;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);}
#course h4 { line-height: 1.2;}
#course .n1 .arrow { background: #C5484F;} #course .n1 h4 { color: #C5484F;}
#course .n2 .arrow { background: #00AFCC;} #course .n2 h4 { color: #00AFCC;}
#course .n3 .arrow { background: #86B3E0;} #course .n3 h4 { color: #86B3E0;}
#course .n4 .arrow { background: #985E41;} #course .n4 h4 { color: #985E41;}
#course .n5 .arrow { background: #F08764;} #course .n5 h4 { color: #F08764;}
#course .n6 .arrow { background: #F49D43;} #course .n6 h4 { color: #F49D43;}
#course .n7 .arrow { background: #F3D95B;} #course .n7 h4 { color: #F3D95B;}
#course .n8 .arrow { background: #D7CF3A;} #course .n8 h4 { color: #D7CF3A;}
#course .n9 .arrow { background: #8AC75A;} #course .n9 h4 { color: #8AC75A;}
#course .n10 .arrow { background: #3AB483;} #course .n10 h4 { color: #3AB483;}

@media screen and (max-width: 1280px) {
  #course .flex_item a { width: 100%;}
  #course .list a { width: calc(50% - 20px);}}
@media screen and (max-width: 1080px) {
  #course .flex_1 { flex-wrap: wrap; gap:40px;}
  #course .list a { width: 100%;}}
@media screen and (max-width: 768px) {
  #course {
    margin-top: 20px;
    background: url("images/course-back-sp.png") no-repeat center top;
    background-size: 100% auto;
    padding: 30vw 0 120px;}
  #course::after { height: 60px;}
  #course .flex_item { gap:20px 0;}
  #course .flex_1 { margin-top: 30px;}}
@media screen and (max-width: 480px) {
  #course .flex_item a { border-radius: 20px;}
  #course .item .photo { width: 40%;}
  #course .item .photo img { width: 100%;}
  #course .item { padding-right: 4vw;gap: 5vw;border-radius: 20px;}
  #course .item .text p { font-size: 13px;}}

/* Support
========================================== */
#support {
  padding: 20px 0 120px;
  background: #E7D1F0;}
#support h2 {
  margin-bottom: 30px;
  line-height: 1.4;}
#support h2 span {
  display: block;
  color: #C177D3;}
#support .flex {
  margin-top: 60px;
  display: flex;
  gap:30px;}
#support .flex .item {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;}
#support .flex .item h3 {
  letter-spacing: normal;
  line-height: 1.5;
  padding: 0 30px;}
#support .flex .item h3::after {
  content: "";
  margin: 20px auto 0;
  display: block;
  width: 60px;
  height: 2px;
  background: #C177D3;}
#support .flex .item p {
  letter-spacing: normal;
  line-height: 1.5;
  padding: 20px 40px 40px;}
#support .flex .item .point {
  position: relative;
  top: -15px;
  border-radius: 0 45px 45px 0;
  padding: 0;
  background: #C177D3;
  width: 90px;
  line-height: 30px;
  text-align: center;
  color: #fff;}

@media screen and (max-width: 1080px) {
  #support .flex { flex-wrap: wrap; gap:40px;}
  #support .flex .item { width: calc(50% - 20px);}
  #support .flex .photo img {width: 100%;}}

@media screen and (max-width: 480px) {
  #support { padding-bottom: 60px;}
  #support .flex { margin-top: 30px;}
  #support .flex .item { width: 100%;}
  #support .flex .item h3::after { margin-top: 10px;}
  #support .flex .item p { padding-top: 14px;}}

/* Footer
========================================== */
#footer { padding: 80px 0 50px;}
#footer .ftlogo { margin-bottom: 20px;}
#footer .flex {
  padding-bottom: 100px;
  display: flex;
  gap: 40px 60px;
  justify-content: space-between;}
#footer h2 {
  position: relative;
  padding-top: 10px;}
#footer h2::before {
  margin-right: 10px;
  top:-6px;
  position: relative;
  display: inline-block;
  content: "";
  width: 20px;
  height: 2px;
  background: #004EA2;}
#footer p.txs-20 a { display: inline-block;}
#footer p.linka a {
  color: #F78C00;
  text-decoration: underline;}
#footer h3 { line-height: 1.5;}
#footer h3.txs-18 img { margin-top: 10px;}

@media screen and (max-width: 1080px) {
  #footer .flex { flex-wrap: wrap; justify-content: center;}}
@media screen and (max-width: 480px) {
  #footer { padding: 60px 0 50px;}
  #footer .flex { padding-bottom: 60px;}
  #footer p.linka a { font-size: 12px;}
  #footer h2 { line-height: 1;}}