@charset "utf-8";
/*---------------------------------------------------------------------------
  TITLE
---------------------------------------------------------------------------*/
/* TITLE1 */
h2.tit { position: relative; z-index: 9;}
h2.tit img  { width: 100%; height: 570px; object-fit: cover;}
h2.tit::before  {
    position: absolute; top: 0; left: 0;
    display: block; clear: both; content:"";
    width: 50%; height: 100%;
    background: url("../image/tit_bg.png") no-repeat right center;
    background-size: cover;
}
h2.tit span {
    display: flex; flex-direction: column; justify-content: center;
    position: absolute; top: 0; left: 10%;
    height: 100%;
    margin: auto;
}
h2.tit span b,
h2.tit span small { display: block;}
h2.tit span b { font-size: 70px; line-height: 130%;}
h2.tit span small { font-size: 25px;}
@media only screen and (max-width:1130px){
    h2.tit img  { height: 470px;}
    h2.tit span b { font-size:60px;}
}
@media only screen and (max-width:968px){
    h2.tit img  { height: 370px;}
    h2.tit span b { font-size:45px;}
}
@media only screen and (max-width:768px){
    h2.tit img  { height: 300px;}
    h2.tit span b { font-size:35px;}
    h2.tit span small { font-size: 18px;}
}
@media only screen and (max-width:468px){
    h2.tit img  { height: 180px;}
    h2.tit span { left: 8%;}
    h2.tit span b { font-size:25px;}
    h2.tit span small { font-size: 16px;}
}


/* TITLE2 */
h2.tit2 { position: relative; z-index: 9; margin: auto; width: 96%; max-width:1650px;}
h2.tit2 img  { width: 100%; max-width:1650px; height: auto; aspect-ratio: 66 / 29; object-fit: cover;}
h2.tit2 .cont {
    display: flex; flex-direction: column; justify-content: center; gap:50px;
    position: absolute; top:0; left: 50%;
    height: 100%;
}
h2.tit2 .catch {
    display: flex; flex-direction: column; align-items: flex-start; gap:10px;
}
h2.tit2 .catch span { 
    display: inline-block;
    padding: 0 20px;
    line-height: 60px;
    font-size: clamp(0.625rem, 3vw, 2.5rem);
    color: #0071bc;
    background: #fff;
}
h2.tit2 .namae { display: flex; flex-direction: column; gap:15px;}
h2.tit2 .namae small { font-size: clamp(0.875rem, 2.2vw, 1.5rem); font-weight: 500;}
h2.tit2 .namae b { display: block; font-size: clamp(0.625rem, 4vw, 2.625rem); }
h2.tit2 .namae.fc-k { color: #222;}
h2.tit2 .namae.fc-w { color: #fff;}
@media only screen and (max-width:968px){
    h2.tit2 .cont { gap:30px; left: 45%;}
    h2.tit2 .catch span { line-height: 50px;}
}
@media only screen and (max-width:768px){
    h2.tit2 .cont { gap:20px; left: 45%;}
    h2.tit2 .catch span { line-height: 40px;}
    h2.tit2 img  { aspect-ratio: 66 / 35;}
}
@media only screen and (max-width:468px){
    h2.tit2 img  { aspect-ratio: 70 / 45;}
    h2.tit2 .cont { gap:15px; left: 40%;}
    h2.tit2 .catch { gap:5px;}
    h2.tit2 .catch span { padding: 0 10px; line-height: 25px;}
    h2.tit2 .namae { gap:5px; line-height: 130%;}
}






/*---------------------------------------------------------------------------
  PAN
---------------------------------------------------------------------------*/
ul.pan {
    position: relative; z-index: 9;
    display: flex;
    margin: auto; width: 90%; max-width: 1200px;
    padding: 60px 0;
}
ul.pan a {color: #666; text-decoration:none;}
ul.pan a:hover {color: #333333;}
ul.pan li + li::before { padding: 0 10px; content: ">";}
@media only screen and (max-width:468px){
    ul.pan { justify-content: center; flex-wrap: wrap; padding: 40px 0;}
}


/*---------------------------------------------------------------------------
  FIX SIDE
---------------------------------------------------------------------------*/
ul.fix_side {
    position: fixed; top:250px; right:25px; z-index: 999;
    display: flex; flex-direction: column; gap:20px;
}
ul.fix_side img { width: 60px; height: auto; border-radius: 13px;}
@media only screen and (max-width:968px){
   ul.fix_side { top:100px; right: 20px;}
   ul.fix_side img { width: 50px;}
}
@media only screen and (max-height:768px){
    ul.fix_side { top:15%; right: 15px; gap:15px;}
    ul.fix_side img { width: 50px;}
}
@media only screen and (max-width:768px){
    ul.fix_side { right: 15px; gap:15px;}
    ul.fix_side img { width: 50px;}
}
@media only screen and (max-width:468px){
    ul.fix_side { flex-direction: row; top: inherit; bottom: 10px; left: 0; right: 0; width: 90%; margin: auto;}
    ul.fix_side img { width:100%; border-radius:5px;}
}



/*============================================
  SUBPAGE
============================================*/
#container .inner { position: relative; z-index: 9; display: flex; flex-direction: column; gap:40px;}
#container .sb_container { position: relative; z-index: 9; display: flex; flex-direction: column; gap:200px;}
#container img.radius30 { border-radius: 30px; }
#container img.radius20 { border-radius: 20px; }
#container.pb0 { padding-bottom: 0; }
@media only screen and (max-width:768px){
    #container .sb_container { gap:150px;}
}
@media only screen and (max-width:468px){
    #container .sb_container { gap:100px;}
}


/*---------------------------------------------------------------------------
  BACKGRAND
---------------------------------------------------------------------------*/

/* CIRCLE BLUE : top right */
.bg_brt { position: relative;}
.bg_brt::before {
    position: absolute;
    display: block; clear: both; content:"";
    aspect-ratio: 1 / 1;
    background-size: 100% auto !important;
}
.bg_brt::before {
    top:-150px; right: -15%;
    width:60%; max-width: 950px; height:auto;
    background: url("../image/circle1.png") no-repeat;
}
@media only screen and (max-width:768px){
    .bg_brt::before { top:-50px;}
}
@media only screen and (max-width:468px){
    .bg_brt::before { top:-50px; right: -25%; width:80%;}
}

/* CIRCLE BLUE : top left */
.bg_blt { position: relative;}
.bg_blt::before {
    position: absolute;
    display: block; clear: both; content:"";
    aspect-ratio: 1 / 1;
    background-size: 100% auto !important;
}
.bg_blt::before {
    top:-150px;left: -15%;
    width:60%; max-width: 950px; height:auto;
    background: url("../image/circle1.png") no-repeat;
}
@media only screen and (max-width:768px){
    .bg_blt::before { top:-50px;}
}
@media only screen and (max-width:468px){
    .bg_blt::before { top:-50px; left: -25%; width:80%;}
}

/* CIRCLE BLUE : bottom left */
.bg_blb { position: relative;}
.bg_blb::before {
    position: absolute;
    display: block; clear: both; content:"";
    aspect-ratio: 1 / 1;
    background-size: 100% auto !important;
}
.bg_blb::before {
    top:30%; left: -15%;
    width:60%; max-width: 950px; height:auto;
    background: url("../image/circle1.png") no-repeat;
}
@media only screen and (max-width:768px){
    .bg_blb::before { bottom:-50px;}
}
@media only screen and (max-width:468px){
    .bg_blb::before { bottom:-50px; left: -25%; width:80%;}
}

/* CIRCLE BLUE : bottom right */
.bg_brb { position: relative;}
.bg_brb::before {
    position: absolute;
    display: block; clear: both; content:"";
    aspect-ratio: 1 / 1;
    background-size: 100% auto !important;
}
.bg_brb::before {
    bottom:-150px; right: -15%;
    width:60%; max-width: 950px; height:auto;
    background: url("../image/circle1.png") no-repeat;
}
@media only screen and (max-width:768px){
    .bg_brb::before { bottom:-50px;}
}
@media only screen and (max-width:468px){
    .bg_brb::before { bottom:-50px; right: -25%; width:80%;}
}

/* CIRCLE ORANGE : top right */
.bg_olt { position: relative;}
.bg_olt::before {
    position: absolute;
    display: block; clear: both; content:"";
    aspect-ratio: 1 / 1;
    background-size: 100% auto !important;
}
.bg_olt::before {
    top:-200px; left: -150px;
    width:60%; max-width: 785px; height:auto;
/*    background: url("../image/circle2.png") no-repeat;*/
}
@media only screen and (max-width:768px){
    .bg_olt::before { top:-150px; left: -20px;}
}
@media only screen and (max-width:468px){
    .bg_olt::before { top:-100px; left: -50px;}
}

/* CIRCLE ORANGE and BLUE */
.bg_ob { position: relative;}
.bg_ob::before,
.bg_ob::after {
    position: absolute;
    display: block; clear: both; content:"";
    aspect-ratio: 1 / 1;
    background-size: 100% auto !important;
}
.bg_ob::before {
    top:37%; left: -150px;
    width:60%; max-width: 785px; height:auto;
    background: url("../image/circle2.png") no-repeat;
}
.bg_ob::after {
    bottom:10%; right: -15%;
    width:60%; max-width: 950px; height:auto;
    background: url("../image/circle1.png") no-repeat;
}
@media only screen and (max-width:768px){
    .bg_ob::before { top:-150px; left: -20px;}
    .bg_ob::after {}
}
@media only screen and (max-width:468px){
    .bg_ob::before { top:-100px; left: -50px;}
    .bg_ob::after {}
}

/* CIRCLE BLUE and ORANGE */
.bg_bo { position: relative;}
.bg_bo::before,
.bg_bo::after{
    position: absolute;
    display: block; clear: both; content:"";
    aspect-ratio: 1 / 1;
    background-size: 100% auto !important;
}
.bg_bo::before {
    top:-150px; right: -15%;
    width:60%; max-width: 950px; height:auto;
    background: url("../image/circle1.png") no-repeat;
}
.bg_bo::after {
    top:37%; left: -150px;
    width:60%; max-width: 785px; height:auto;
    background: url("../image/circle2.png") no-repeat;
}
@media only screen and (max-width:768px){
    .bg_bo::before { top:-50px;}
    .bg_bo::after { top:-150px; left: -20px;}
}
@media only screen and (max-width:468px){
    .bg_bo::before { top:-50px; right: -25%; width:80%;}
    .bg_bo::after { top:-100px; left: -50px;}
}

/* CIRCLE ORANGE : full */
.bg_ofull { position: relative; background: url("../image/bg_o.jpg") repeat center center; overflow: hidden;}
.bg_ofull::before,
.bg_ofull::after {
    position: absolute;
    display: block; clear: both; content:"";
    aspect-ratio: 1 / 1;
    width:60%; max-width: 785px; height:auto;
    background-size: 100% auto !important;
}
.bg_ofull::before {
    top:-150px; left: -50px;
    background: url("../image/circle2.png") no-repeat;
}
.bg_ofull::after {
    bottom:-150px; right: -50px;
    background: url("../image/circle3.png") no-repeat;
}
@media only screen and (max-width:768px){
    .bg_ofull::before { top:-50px;}
    .bg_ofull::after { left: -20px;}
}
@media only screen and (max-width:468px){
    .bg_ofull::before { top:-50px; right: -25%; width:80%;}
    .bg_ofull::after { left: -50px;}
}

/* CIRCLE ALL : full */
.bg_all { position: relative;}
.bg_all::before {
    position: absolute;
    display: block; clear: both; content:"";
    aspect-ratio: 127 / 397;
    width:100%; max-width:500px; height:auto;
    background-size: 100% auto !important;
}
.bg_all::before {
    bottom: 0; right: -50px;
    background:url("../image/circle6.png") no-repeat center 150px;
}
@media only screen and (max-width:968px){
    .bg_all::before { max-width:400px;}
}
@media only screen and (max-width:768px){
    .bg_all::before { max-width:350px;}
}
@media only screen and (max-width:468px){
    .bg_all::before { max-width:300px; bottom: inherit; top: 150px; background-position:center top;}
}



/*---------------------------------------------------------------------------
  FONT SIZE
---------------------------------------------------------------------------*/
#container .fs120 { font-size: clamp(3.75rem, 11vw, 7.5rem);} /*60 → 120*/
#container .fs67 { font-size: clamp(2.1875rem, 6vw, 4.1875rem); line-height: 110%; } /* 35px → 67px */
#container .fs52 { font-size: clamp(2.6875rem, 5.5vw, 3.25rem);  line-height: 110%; font-weight: 900;}  /* 35px → 52px */
#container .fs50 { font-size: clamp(1.6875rem, 5vw, 3.125rem); }  /* 26px → 50px */
#container .fs45 { font-size: clamp(2rem, 4.5vw, 2.8125rem); line-height: 130%; }  /* 32px → 45px */
#container .fs42 { font-size: clamp(1.1875rem, 4vw, 2.625rem); }  /* 19px → 42px */
#container .fs40 { font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 110%;}  /* 20px → 40px */
    #container .fs40.min-fs40 { font-size: 2.5rem; } /* 40px */
#container .fs35 { font-size: clamp(1.9375rem, 3.5vw, 2.1875rem); }  /* 26px → 35px */
#container .fs30 { font-size: clamp(1.6875rem, 3vw, 1.875rem); }  /* 24px → 30px */
    #container .fs30.min-fs22 { font-size: clamp(1.625rem, 2.5vw, 1.75rem); }  /* 22px → 30px */
    #container .fs30.min-fs16 { font-size: clamp(1rem, 4vw, 1.875rem); }  /* 16px → 30px */
#container .fs28 { font-size: clamp(1.4375rem, 4vw, 1.75rem); }  /* 23px → 28px */
    #container .fs28.min-fs20 { font-size: clamp(1.25rem, 2vw, 1.75rem);; }  /* 20px → 28px */
#container .fs24 { font-size: clamp(1rem, 4vw, 1.5rem); }  /* 16px → 24px */
    #container .fs24.min-fs23 { font-size: clamp(1.4375rem, 4vw, 1.5rem); }  /* 23px → 24px */
#container .fs20 { font-size: clamp(0.875rem, 2.2vw, 1.5rem); line-height: 150%; } /* 14px → 20px */
    #container .fs20.min-fs20 { font-size:1.5rem; } /* 14px → 20px */
#container .fs18 { font-size: clamp(0.875rem, 2vw, 1.125rem); line-height: 220%; } /* 14px → 18px */
    #container .fs18.min-fs18 { font-size: 1.125rem; } /* 18px */
#container .fs16 { font-size: clamp(0.875rem, 1.8vw, 1rem); } /* 14px → 16px */
#container .fs14 { font-size: 0.875rem; } /* 14px */
#container .fs14.min-fs10 { font-size: clamp(0.625rem, 1.3vw, 0.625rem); line-height: 200%;} /* 10px → 14px */


/*---------------------------------------------------------------------------
  MIDASHI
---------------------------------------------------------------------------*/
#container h3 { line-height: 180%; font-weight: 900;}
    #container h3 b { display: block; margin-bottom:20px;}
    #container h3 small { display: block; font-weight: 400;}
#container h4 { line-height: 180%; font-weight: 900;}
    #container h4 b { display: block; margin-bottom:20px;}
    #container h4 small { display: block; font-weight: 400;}
#container h5 { line-height: 180%;}
#container h6 { line-height: 180%;}
#container .spacing4 { letter-spacing:  4px;}

/* MIDASHI type1 */
#container .mid_type1  { display: flex; flex-wrap: wrap; gap:20px;}
#container .mid_type1 span:nth-child(1) {
    align-self: flex-start;
    width: 60px; line-height: 35px;
    text-align: center;
    color: #fff;
    background: linear-gradient(#009586, #23aee5);
    border-radius:10px;
}
#container .mid_type1 span:nth-child(2)  { width: calc(100% - 60px - 20px);}

/* MIDASHI type2 */
#container .mid_type2  {}
#container .mid_type2 span:nth-child(1) {
    display: inline-block;
    padding: 15px 20px;
    color: #fff;
    background: linear-gradient(#009586, #23aee5);
    border-radius:15px;
    text-align: left;
}
#container .mid_type2 span:nth-child(2)  { display: block; margin-top: 30px; line-height: 130%;}

/* MIDASHI type3 */
#container .mid_type3  { position: relative; margin: auto; width: 100%; max-width: 1400px;}
#container .mid_type3 p {
    position: absolute; right: 0; left: 0; bottom:0; z-index: 9;
    margin: auto;
    width: 90%; max-width: 1200px;
    text-align: left;
}
#container .mid_type3 img {
    position: relative; left:-5%;
    width: 100%; height: auto;
}


/*---------------------------------------------------------------------------
  NOTES
---------------------------------------------------------------------------*/
#container .notes { padding-left: 20px; text-indent: -20px;}
#container .notes::before { margin-right: 5px; content:"※";}


/*---------------------------------------------------------------------------
  LIST
---------------------------------------------------------------------------*/
/* UL type1 */
#container ul.list-type1 li { position: relative; padding-left:25px;}
#container ul.list-type1 li::before {
    position: absolute; top: 8px; left: 0;
    display: block; clear: both; content:"";
    width: 14px; height: 14px;
    background: #ed6d00;
}

/* UL type2 */
#container ul.list-type2 li { position: relative; padding-left:25px;}
#container ul.list-type2 li::before {
    position: absolute; top: 8px; left: 0;
    display: block; clear: both; content:"";
    width: 14px; height: 14px;
    background: #ffdd10;
    border-radius: 14px;
}

/* NUMBER type2 */
#container ul.number-type1 li {  position: relative; padding-left:30px; counter-increment: list-counter;}
#container ul.number-type1 li::before {
    content: counter(list-counter);
    position: absolute; top: 5px; left: 0;
    width: 22px; height: 22px; line-height: 22px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: #ffdd10;
    border-radius: 22px;
}


/*---------------------------------------------------------------------------
  BUTTON
---------------------------------------------------------------------------*/
#container .btn { width: 100%;}
#container .btn a {
    display: block;
    padding: 0 20px;
    font-weight: 700;
    border-radius: 100px;
    box-sizing: border-box;
    transition: .3s;
}

/* COLOR */
#container .btn.btn-wo a {
    color: #ed6d00;
    background-color: #fff;
    background-image: url("../image/arrow_o.svg");
    background-repeat: no-repeat;
}
#container .btn.btn-wy a {
    color: #222;
    background-color: #fff;
    background-image: url("../image/arrow_y.svg");
    background-repeat: no-repeat;
}
#container .btn.btn-o a {
    color: #fff;
    background-color: #ed6d00;
    background-image: url("../image/arrow_w.svg");
    background-repeat: no-repeat;
}

/* SIZE */
#container .btn.btn-s { width: 100%; max-width: 140px;}
#container .btn.btn-s a {
    line-height: 40px;
    background-position: 92% center;
    background-size: 24px auto;
}
#container .btn.btn-m { width: 100%; max-width: 170px;}
#container .btn.btn-m a {
    line-height: 40px;
    background-position: 92% center;
    background-size: 24px auto;
}
#container .btn.btn-l { width: 100%; max-width: 400px;}
#container .btn.btn-l a {
    line-height: 85px;
    text-align: center;
    background-position: 94% center;
    background-size: 32px auto !important;
}
@media only screen and (min-width:768px){
    #container .btn a:hover {
        text-decoration: none;
        box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
    }
}
@media only screen and (mac-width:768px){
    #container .btn.btn-s a { line-height: 30px; background-size: 18px auto;}
    #container .btn.btn-m a { line-height: 35px; background-size: 18px auto;}
    #container .btn.btn-l a { line-height: 75px; background-size: 24px auto;}
}


/*---------------------------------------------------------------------------
  WIDTH
---------------------------------------------------------------------------*/
#container .w140 { width: 100%; max-width: 140px;}
#container .w170 { width: 100%; max-width: 170px;}
#container .w400 { width: 100%; max-width: 400px;}


/*---------------------------------------------------------------------------
  DL / DT /  DD
---------------------------------------------------------------------------*/
/* DL type1 */
#container .dl-type1 dl { display: flex; gap:10px 40px; padding: 30px 0;}
#container .dl-type1 dl + dl { border-top: 1px dashed #ccc;}
#container .dl-type1 dl dt {
    position: relative;
    padding-left: 30px;
    width: 240px;
    color: #ed6d00;
    font-weight: 700;
}
#container .dl-type1 dl dt span{ display: block;}
#container .dl-type1 dl dt::before {
    position: absolute; top: 10px; left: 0;
    display: block; clear: both; content:"";
    width: 17px; height: 17px;
    background: #fdd100;
    border-radius: 17px;
}
#container .dl-type1 dl dd {
    width: calc(100% - 40px - 285px);
}

/* DL type2 */
#container .dl-type2 { display: flex; flex-direction: column; gap:40px;}
#container .dl-type2 dl dt {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-weight: 700;
}
#container .dl-type2 dl dt.lightblue { border-left:7px solid #4fc2f1;}
#container .dl-type2 dl dt.orange { border-left:7px solid #f15a24;}
#container .dl-type2 dl dt.yellow { border-left:7px solid #fbb03b;}
#container .dl-type2 dl dt.green { border-left:7px solid #009a44;}
@media only screen and (max-width:468px){
    #container .dl-type1 dl { flex-direction: column;}
    #container .dl-type1 dl dt,
    #container .dl-type1 dl dd { width: 100%; }
    #container .dl-type1 dl dt span { display: inline;}
    #container .dl-type1 dl dt span + span::before { content:"・";}
    #container .dl-type2 dl dt { padding-left: 15px;}
}

/* DL type3 */
#container .dl-type3 { display: flex; flex-wrap: wrap; gap:35px;}
#container .dl-type3 dl {
    position: relative;
    width: calc(25% - 26.25px);
    padding:30px 20px 20px;
    background: #fff;
    border: 2px solid #fdd100;
    border-radius: 20px;
}
#container .dl-type3 dt {
    position: absolute; top: -15px; left: 18px;
    width: 60px;
    font-size: 137%;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: #000;
    border-radius:10px;
}
#container .dl-type3 dt.lightblue { background: linear-gradient(#009586, #23aee5);}
#container .dl-type3 dt.yellow { background: linear-gradient(#e7a52f, #fdd100);}
#container .dl-type3 dt.orange { background: linear-gradient(#e5a22f, #ed6d00);}
#container .dl-type3 dt.green { background: linear-gradient(#3c9f96, #009a44);}
@media only screen and (max-width:768px){
    #container .dl-type3 { gap:30px 20px;}
    #container .dl-type3 dl { width: calc(50% - 10px);}
}
@media only screen and (max-width:468px){
    #container .dl-type3 dl { padding:20px 15px}
}

/* DL type4 */
#container .dl-type4 { display: flex; flex-direction: column; gap:40px;}
#container .dl-type4 dl { padding:20px; background:#fbb03b; border-radius: 20px;}
#container .dl-type4 dt::before,
#container .dl-type4 dd::before {
    position: absolute;
    display: block; clear: both;
    width: 38px; height: 38px; line-height: 35px;
	font-family: 'Noto Sans JP', sans-serif;
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    border-radius:6px;
}
#container .dl-type4 dt::before {
    top:0; left: 0;
    content: "Q"; color: #fbb03b; background: #fff;
}
#container .dl-type4 dd::before {
    top:30px; left: 20px;
    content: "A"; color: #fff; background: #fbb03b;
}
#container .dl-type4 dt,
#container .dl-type4 dd { position: relative; }
#container .dl-type4 dt { cursor: pointer; padding: 0 100px 0 50px; font-weight: 700; min-height: 38px;}
#container .dl-type4 dd { display: none;}
#container .dl-type4 dd .come { margin-top:10px; padding:20px 20px 20px 70px; background: #fff; min-height: 38px;}
    #container .dl-type4 dl dt .b_accordion {
        cursor: pointer;
        position: absolute; top:0; right: 0;
        width: 38px; height: 38px;
    }
    #container .dl-type4 dl dt .b_accordion span {
        display: inline-block;
        position: absolute; top:0; bottom: 0; right: 20px; margin:auto;
        width:23px; height: 4px;
        background: #000;
        border-radius: 3px;
        transition: all .3s;
    }
    #container .dl-type4 dt .b_accordion span:nth-of-type(1) { transform:rotate(-90deg);}
    #container .dl-type4 dt.active .b_accordion span:nth-of-type(1) { transform:rotate(0);}


/*---------------------------------------------------------------------------
  TABLE
---------------------------------------------------------------------------*/
#container table {
	border-collapse:collapse;
	border-top:1px solid #ddd;
}
#container table th,
#container table td {
	padding:20px 25px;
	border-bottom:1px solid #ddd;
}
#container table th + th { border-left:1px solid #ddd;}
#container table td + td { border-left:1px solid #ddd;}
#container table th { background: #f6f6f6;}
#container table.table-y.col2 th { width: 120px; vertical-align: top;}
@media only screen and (max-width:468px){
    #container table { table-layout:auto;}
    #container table.table-y th,
    #container table.table-y td {
        table-layout:auto !important;
        display:block !important;
        width: 90% !important;
        height:auto !important;
    }
    #container table.table-y th { padding:2% 5% !important; text-align: left;}
    #container table.table-y td { padding:5% !important;}
    #container table.table-x { border-top:none !important; border-bottom:1px solid #ddd !important;}
    #container table.table-x thead { display: none;}
    #container table.table-x th,
    #container table.table-x td {
        table-layout:auto !important;
        display:block !important;
        padding:0 !important;
        height:auto !important;
        border-left: none !important;
    }
    #container table.table-x td { border-bottom: none !important;}
    #container table.table-x .mid { 
        display: block;
        padding:2% 5% !important;
        font-weight: 700;
        border-top:1px solid #ddd !important;
        border-bottom:1px solid #ddd !important;
        background: #f6f6f6;
    }
    #container table.table-x .come { padding:5% !important;}
}


/*---------------------------------------------------------------------------
  GALLERY
---------------------------------------------------------------------------*/
#container .gallery { display: flex; justify-content: center; gap:40px;}
#container .gallery ul { position: relative;}
#container .gallery ul li.photo img { max-width: 70%; width: auto; height:auto; margin: 0 auto; display: block;}
#container .gallery ul li.caption {
    position: absolute; bottom: 0; left: 0;
    padding: 20px;
    width: 100%;
    color: #fff;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1.00));
}

@media only screen and (max-width:768px){
#container .gallery ul li.photo img { max-width: 90%; width: auto; height:auto; margin: 0 auto; display: block;}
}

@media only screen and (max-width:468px){
    #container .gallery {flex-direction: column;}
}


/*---------------------------------------------------------------------------
  BOX TEMPLATE
---------------------------------------------------------------------------*/
#container .box_container { display: flex; flex-direction: column; gap:200px;}
@media only screen and (max-width:468px){
    #container .box_container { gap:100px;}
}

/* BOX type1 */
#container .box_type1 { display: flex; gap:80px;}
#container .box_type1 .photo { position: relative; width: calc(50% - 80px);}
    #container .box_type1 .photo img { width: 100%; height:  auto;}
    #container .box_type1 .photo.type1 { display: flex; gap:20px;}
    #container .box_type1 .photo.type2 p:nth-child(1) { width: 80%;}
    #container .box_type1 .photo.type2 p:nth-child(2) { width: 50%; position: absolute; right: -5%; top:50%;}
#container .box_type1 .cont { display: flex; flex-direction: column; gap:45px; width:50%;}
    #container .box_type1 .cont .sb-cont1 { display: flex; flex-direction: column; gap:20px;}
    #container .box_type1 .cont .sb-cont2 { display: flex; flex-direction: column; gap:15px;}
    #container .box_type1 .cont .border_mid { padding-bottom: 15px; border-bottom: 1px solid #808080;}
    #container .box_type1 .cont .banner img { max-width: 270px;}
#container .box_type1.row-re { flex-direction: row-reverse;}
#container .box_type1 .cont.wfull {width: 100%;}
@media only screen and (max-width:968px){
    #container .box_type1 .photo.type2 p:nth-child(2) { top:40%;}
}
@media only screen and (max-width:768px){
    #container .box_type1 { gap:40px;}
    #container .box_type1 .photo { position: relative; width: calc(50% - 40px);}
    #container .box_type1 .photo.type2 p:nth-child(2) { top:30%;}
}
@media only screen and (max-width:468px){
    #container .box_type1 { gap:20px;}
    #container .box_type1 { flex-direction: column !important;}
    #container .box_type1.col-re_sp { flex-direction:column-reverse !important;}
    #container .box_type1 .photo,
    #container .box_type1 .cont { width: 100%;}
    #container .box_type1 .photo.type2 p:nth-child(2) { top:60%;}
    #container .box_type1 .cont { gap:20px;}
    #container .box_type1 .cont .sb-cont1 { gap:15px;}
    #container .box_type1 .cont .sb-cont2 { gap:15px;}
}

/* BOX type2 */
#container .box_type2 { position: relative; display: flex; flex-wrap: wrap; gap:80px;}
#container .box_type2 .photo { position: relative; width: calc(100% - 64.17%);}
#container .box_type2 .photo img { position:absolute; top: 0; left: 0; width:150%; height: auto;}
#container .box_type2 .cont { display: flex; flex-direction: column; gap:45px; width: calc(64.17% - 80px);}
#container .box_type2 .sb-cont { display: flex; flex-wrap: wrap; gap:40px;}
    #container .box_type2 .sb-cont.row-re { flex-direction: row-reverse;}
    #container .box_type2 .sb-cont .person { width: 120px; text-align: center;}
    #container .box_type2 .sb-cont .person img { margin-bottom: 10px; width:100%; object-fit: cover; aspect-ratio: 1 / 1; border-radius: 100%;}
    #container .box_type2 .sb-cont .come { width: calc(100% - 120px - 40px);}
    #container .box_type2 .border_mid { margin: 40px 0 15px; padding-bottom: 15px; border-bottom: 1px solid #808080;}
#container .box_type2.row-re { flex-direction: row-reverse;}
#container .box_type2.row-re .photo img { left:inherit; right: 0;}
#container .box_type2 .cont.wfull {width: 100%;}
@media only screen and (max-width:968px){
    #container .box_type2 { gap:40px;}
    #container .box_type2 .photo { pwidth: calc(100% - 60%);}
    #container .box_type2 .photo img { width:150%;}
    #container .box_type2 .cont { width: calc(60% - 40px);}
}
@media only screen and (max-width:768px){
    #container .box_type2 { gap:40px 20px;}
    #container .box_type2 { flex-direction: column !important;}
    #container .box_type2 .photo,
    #container .box_type2 .cont { width: 100%;}
    #container .box_type2 .photo img { position: static; width:107%; border-top-right-radius: 0; border-bottom-right-radius: 0;}
    #container .box_type2.row-re .photo { position: relative; left:-7%;}
    #container .box_type2.row-re .photo img { border-radius: 30px; border-top-left-radius: 0; border-bottom-left-radius: 0;}
}
@media only screen and (max-width:468px){
    #container .box_type1.col-re_sp { flex-direction:column-reverse !important;}
    #container .box_type2 .sb-cont .person { width: 85px;}
    #container .box_type2 .sb-cont { gap:20px;}
    #container .box_type2 .sb-cont .come { width: calc(100% - 85px - 20px);}

}

/* BOX type3*/
#container .box_type3 { 
    position: relative;
    padding: 40px;
    background: url("../image/bg_o.jpg") repeat center center;
    border-radius: 20px;
}
#container .box_type3 .cont { 
    display: flex; flex-direction: column; gap:20px;
    padding-right:25%;
    width: clac(100% - 20% - 5%);
}
#container .box_type3 .photo { position: absolute; top:-50px; right:5%; width: 20%; max-width:150px;}
#container .box_type3 .photo img { width: 100%; height: auto;}
@media only screen and (max-width:468px){
    #container .box_type3 { padding: 30px;}
    #container .box_type3 .photo { top:-20px;}
}


/*---------------------------------------------------------------------------
  PROFILE
---------------------------------------------------------------------------*/
/* type1 */
#container .profile { display: flex; gap:80px;}
#container .profile .person {
    display: flex; flex-direction: column; gap:30px;
    width: calc(50% - 40px);
}
#container .profile .photo { text-align: center;}
#container .profile .photo img { width: 250px; height: 250px; object-fit: cover;}
#container .profile .prof {
    display: flex; flex-direction: column; gap:10px;
    text-align: center;
}
@media only screen and (max-width:768px){
    #container .profile { gap:60px;}
    #container .profile .person { width: calc(50% - 30px);}
}
@media only screen and (max-width:468px){
    #container .profile { flex-direction: column; gap:70px 40px;}
    #container .profile .person { width: 100%;}
}

/* type2 */
#container .profile2 { 
    display: flex; flex-wrap: wrap; justify-content: center; gap:70px;
    margin: auto; width: 100%; max-width: 880px;
}
#container .profile2 .person {
    display: flex; flex-direction: column; gap:30px;
    max-width:250px; width:calc(33.3% -  46.66px);
}
#container .profile2 .photo { text-align: center;}
#container .profile2 .photo img { width:100%; height: auto; object-fit: cover;}
#container .profile2 .prof {
    display: flex; flex-direction: column; gap:10px;
    text-align: center;
}
@media only screen and (max-width:768px){
    #container .profile2 { gap:60px;}
    #container .profile2 .person { width: calc(33.3% - 40px);}
}
@media only screen and (max-width:468px){
    #container .profile2 { gap:70px 40px;}
    #container .profile2 .person { width: calc(50% - 20px);}
}


/*---------------------------------------------------------------------------
  STAFF LIST
---------------------------------------------------------------------------*/
#container .staff_list { display: flex; gap:40px;}
#container .staff_list .person {
    position: relative;
    display: flex; flex-direction: column; gap:30px;
    padding-bottom: 40px;
    width: calc(50% - 40px);
    background: url("../image/circle4.png") no-repeat center bottom;
    background-size: 100% auto;
}
#container .staff_list .photo { text-align: center;}
#container .staff_list .photo img { width:65%; object-fit: cover; aspect-ratio: 1 / 1;}
#container .staff_list .prof {
    display: flex; flex-direction: column; gap:10px;
    text-align: center;
}
#container .staff_list .prof span { display:flex; flex-wrap: wrap; justify-content: center; gap:0 10px;}
#container .staff_list .prof .namae span + span { margin-top: 10px; color: #555;}
#container .staff_list .btn { margin: auto;}
@media only screen and (max-width:768px){
    #container .staff_list { gap:70px 20px;}
    #container .staff_list .person { width: calc(50% - 30px);} 
}
@media only screen and (max-width:468px){
    #container .staff_list { flex-direction: column; gap:70px 20px;}
    #container .staff_list .person { width: 100%;}
}


/*---------------------------------------------------------------------------
  MAP
---------------------------------------------------------------------------*/
#container .map_list { display: flex; flex-direction: column; gap:40px;}
#container .map_list ul { display: flex; flex-wrap: wrap; gap:10px;}
#container .map_list ul li:nth-child(1) {
    padding-top: 8px;
    width: 65px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #8bc2a7;
    background:url("../image/pin.svg") no-repeat center top;
}
#container .map_list ul li:nth-child(2) { width: calc(100% - 65px - 10px);}
#container .map_list ul li:nth-child(2) p:nth-child(1) { font-weight: 700;}
@media only screen and (max-width:768px){
    #container .map_list { gap:30px;}
    #container .map_list ul li:nth-child(1) {
        padding-top: 7px;
        width: 45px;
        font-size: 15px;
    }
    #container .map_list ul li:nth-child(2) { width: calc(100% - 45px - 10px);}
}
@media only screen and (max-width:768px){
    #container .map_list { gap:20px;}
    #container .map_list ul li:nth-child(1) {
        padding-top:0;
        width: 30px;
        font-size: 12px;
    }
    #container .map_list ul li:nth-child(2) { width: calc(100% - 30px - 10px);}
}




/*---------------------------------------------------------------------------
  VALUE
---------------------------------------------------------------------------*/
#container .value_list { display: flex; flex-wrap: wrap;}
#container .value_list + .value_list { margin-top: 24px;}
#container .value_list.col3 { gap:64px;}
#container .value_list.col4 { gap:64px 34px;}
#container .value_list.col3 .box { padding: 35px 20px; width:calc(33.3% - 42.66px);  justify-content: space-between; }
#container .value_list.col4 .box { padding: 30px 20px; width:calc(25% - 25.5px);  justify-content: flex-start; }
#container .value_list .box {
    display: flex; flex-direction: column;gap:30px;
    text-align: center;
    background:rgba(255,255,255,0.85);
    border: 2px solid #fdd100;
    border-radius: 20px;
}
#container .value_list .box.noborder { border: none; text-align: left; padding: 0; }
#container .value_list .box h4 { line-height: 130%;}
#container .value_list.col4 .box h4 { min-height: 72px;}
#container .value_list.col4 .box h4.noheight { min-height:inherit;}
#container .value_list .box .photo img { width: 90%; height: auto;}
#container .value_list .box .value { line-height: 180%;}
#container .value_list .box .value span { font-size: clamp(0.875rem, 1.8vw, 1rem); line-height: 100%; display: block;}
#container .value_list.col3 .box .value b { font-size: clamp(1.875rem, 5vw, 3.75rem); font-weight: 700;}
#container .value_list.col3 .box .value small { font-size: clamp(0.875rem, 1.8vw, 1.875rem); font-weight: 700;}
#container .value_list.col3 .box .value span { font-size: clamp(0.875rem, 1.8vw, 1rem); }
#container .value_list.col4 .box .value b { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700;}
#container .value_list.col4 .box .value small { font-size: clamp(0.875rem, 1.8vw, 1.875rem); font-weight: 700;}
@media only screen and (max-width:768px){
    #container .value_list.col3,
    #container .value_list.col4 { gap:20px;}
    #container .value_list.col3 .box,
    #container .value_list.col4 .box {  gap:10px; padding: 15px 5px;; width:calc(50% - 10px);}
    #container .value_list.col4 .box h4 { min-height:inherit;}
    #container .value_list .box.noborder { width: 100%; }
}