@charset "UTF-8";

body
{
background-color: #f0e6e4;

}
/* ================================================================================
KV
================================================================================ */
@media print, screen
{

#KV
{
	background-color: #f0e6e4;
	width: 100%;

}


#KV > .inner
{
width: calc(1325 * var(--u));
padding: calc(0 * var(--u)) 0 calc(0 * var(--u));
position: relative;
}


#KV .image1
{
width: calc(513 * var(--u));
position: absolute;
z-index: 20;
top: calc(-50 * var(--u));
left: calc(-100 * var(--u));

}

#KV .image2
{
width: calc(415 * var(--u));
position: absolute;
top: calc(-50 * var(--u));
right: calc(-40 * var(--u));
z-index: 20;
}

#KV .image4
{
width: calc(1208 * var(--u));
position: absolute;
top: calc(500 * var(--u));
left: calc(10 * var(--u));
z-index: 10;

}

#KV h1
{
font-size: calc(48 * var(--u));
letter-spacing: 0.05em;
color: #4f4844;
text-align: center;
font-weight:600;
margin-bottom: calc(30 * var(--u));
}

#KV h1 span
{
font-size: calc(30 * var(--u));
color: #4f4844;
text-align: center;
font-weight:600;
}

#KV h2
{
font-size: calc(14 * var(--u));
color: #4f4844;
text-align: center;
letter-spacing: 0.05em;
margin-bottom: calc(30 * var(--u));
}


#KV .boxes
{
width: calc(810 * var(--u));
display: flex;
justify-content: space-between;
margin: 0 auto;

}


#KV .box
{
  position: relative;
  z-index: 20;

}

#KV .image3
{
width: calc(415 * var(--u));
position: relative;
z-index: 30;

}




#KV h3
{
font-size: calc(31 * var(--u));
line-height: 1.7;
color: #333130;
text-align: left;
letter-spacing: 0.05em;
margin-bottom: calc(45 * var(--u));
}

#KV h3 span{
background: linear-gradient(to bottom, transparent 70%, #e7d7d9 70%);

}

#KV .tag
{
margin-bottom: calc(30 * var(--u));
}

#KV .tag span
{
font-size: calc(14 * var(--u));
color: white;
padding: calc(10 * var(--u)) calc(20 * var(--u));
background-color: #caa6b5;
border-radius: calc(20 * var(--u));
}

#KV .profile
{
  position: relative;
  z-index: 20;
}

#KV .name
{
font-size: calc(21 * var(--u));
margin-bottom: calc(15 * var(--u));
}

#KV .text
{
font-size: calc(16 * var(--u));
line-height: 1.7;
}

}
@media screen and (max-width: 767px)
{


    #KV > .inner
    {
    width: 100vw;
    margin: 0 auto;
    padding: 24vw 0vw 0;
    position: relative;
    }



    #KV .image1
    {
    width: 40vw;
    z-index: 20;
    top: -16vw;
    left: auto;
    right: 0vw;

    }

    #KV .image2
    {
    width: 60vw;
    top: auto;
    bottom: 0;
    right: 0vw;
    z-index: 20;
    }

    #KV .image4
    {
    width: 90vw;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0vw;
    z-index: 10;

    }


    #KV .image3
    {
    width: 48vw;
    position: relative;
    z-index: 30;
    }

    #KV .pbutton
    {
    position: absolute;
    width: 20vw;
    bottom: 5vw;
    left: 5vw;
    z-index: 40;
    }


    #KV h1
    {
    position: relative;
    z-index: 30;
    letter-spacing: 0.1em;
    margin-bottom: 3vw;

    }

    #KV h1 span
    {
    font-size: 4.5vw;
    }


    #KV h2
    {
    position: relative;
    z-index: 30;
    font-size: 2.5vw;
    margin-bottom: 0vw;

    }


    #KV .boxes
    {
    width: 100vw;
    justify-content: flex-start;
    margin: 0;
    }

    #KV .box2
    {
        padding-top: 10vw;

    }

    #KV h3
    {
        font-size: 5vw;
        line-height: 1.8;
        letter-spacing: 0.1em;

    }


    #KV .tag
    {
    margin-bottom: calc(40 * var(--u));
    position: relative;
    z-index: 30;
    }

    #KV .tag span
    {
    font-size: 2.7vw;
    color: white;
    padding: calc(10 * var(--u)) calc(25 * var(--u));
    background-color: #caa6b5;
    border-radius: calc(20 * var(--u));
    }


    #KV .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.6);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    #KV .popup-content {
        position: relative;
        width: 80vw;
        background-color: #f0e6e4;
      padding: 9vw;
      border-radius: 5vw;
    }


    .close-button {
      position: absolute;
      top: -9vw;
      right: 0;
      background: rgba(255, 255, 255, 0);
      font-size: 9vw;
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }

    #KV .name
    {
    font-size: 5vw;
    margin-bottom: 5vw;
    }

    #KV .text
    {
    font-size: 4vw;
    line-height: 1.7;
    }



}


/* ================================================================================
course
================================================================================ */
@media print, screen
{

#course
{
	background-color: #f6eeea;
	width: 100%;
	padding: 0;

}


#course > .inner
{
/* width: calc(1325 * var(--u)); */
padding-top: calc(100 * var(--u));
padding-bottom: calc(110 * var(--u));
}

#course h4
{
text-align: center;
font-size: calc(32 * var(--v));
color: #4f4844;
}


#course .imagebg
{
width: calc(418 * var(--u));
margin: calc(-30 * var(--u)) auto 0;
}

#course .text
{
text-align: center;
font-size: calc(26 * var(--v));
line-height: 1.7;
color: #4f4844;
}

#course .imagel
{
width: calc(960 * var(--u));
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#course .imagel li
{
width: calc(436 * var(--u));
}

#course .image
{
width: calc(436 * var(--u));
}

#course h5
{
text-align: center;
font-size: calc(32 * var(--v));
line-height: 1.3;
color: #4f4844;
}

#course h5 span
{
text-align: center;
font-size: calc(24 * var(--v));
color: #4f4844;
}

#course .sub
{
text-align: center;
font-size: calc(16 * var(--v));
line-height: 1.5;
color: #4f4844;
}


}
@media screen and (max-width: 767px)
{

#course h4
{
font-size: 5vw;
}

#course .text
{
text-align: center;
font-size: 4.5vw;
line-height: 1.7;
color: #4f4844;
}

#course .toggle
{
position: relative;
z-index: 2;
width: 85vw;
/* padding: 5vw 5vw; */
margin: 0 auto 10vw;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

#course h3
{
padding: 5vw 5vw 5vw 8vw;
font-size: 4vw;
color: #333130;
}

#course .toggle ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease;
  padding: 0 3vw;
}

#course .toggle ul.open {
  max-height: 200vw; /* 開くときの最大高さ（十分大きくする） */
}


#course .toggle li
{
cursor: pointer;
position: relative;
border-top: 1px solid #cecece;
}

#course .toggle li a
{
    display: block;
width: 100%;
height: 100%;
  text-decoration: none;
padding: calc(30 * var(--u)) 5vw;
}





#course .list
{
display: none;
font-size: calc(16 * var(--v));
line-height: 2;
color: #333130;
padding: calc(30 * var(--u)) 0 0;
}


/* #course .toggle li:nth-last-child(1)
{
border-bottom: 1px solid #cecece;
} */


#course .listb
{
position: absolute;
top: calc(45 * var(--u));
right: calc(30 * var(--u));
}

#course .openi
{
width: calc(25 * var(--u));
transform: rotate(0deg);
transition: transform 0.5s ease; /* 0.5秒かけて回転 */
}


#course .openi.rotated
{
transform: rotate(180deg);
}

#course .close
{
width: calc(13 * var(--u));
display: none;
right: calc(31 * var(--u));
}


#course .imagel
{
width: 80vw;
margin: 0 auto;
display: block;
}


#course .imagel li
{
width: 80vw;
margin-bottom: 8vw;
}

#course .image
{
width: 80vw;
}

#course h5
{
font-size: 6vw;
}

#course h5 span
{
font-size: 5vw;
}

#course .sub
{
font-size: 4vw;
}


}


/* ================================================================================
form
================================================================================ */
@media print, screen
{

#form
{
	background-color: #f0e6e4;
	width: 100%;

}


#form > .inner
{
width: calc(940 * var(--u));
padding-top: calc(30 * var(--u));
display: flex;
justify-content: space-between;
}

#form .imagef
{
width: calc(420 * var(--u));
}

#form .rbox
{
padding-top: calc(80 * var(--u));
}

#form h3
{
font-size: calc(31 * var(--u));
line-height: 1.7;
color: #333130;
text-align: center;
letter-spacing: 0.05em;
margin-bottom: calc(20 * var(--u));
}

#form h3 span{
background: linear-gradient(to bottom, transparent 70%, #e7d7d9 70%);

}


#form .sub
{
font-size: calc(16 * var(--u));
line-height: 1.7;
color: #333130;
text-align: center;
margin-bottom: calc(20 * var(--u));
}



#form .bbox
{
width: calc(270 * var(--u));
margin: 0 auto;

}

#form a
{
display: block;
}

#form .button
{
position: relative;
width: calc(270 * var(--u));
margin: 0 auto calc(15 * var(--u));
padding: calc(20 * var(--u)) 0;
border: 1px solid #4f4844;
border-radius: calc(95 * var(--u));
}

#form .btext
{
text-align: center;
font-size: calc(18 * var(--v));
color: #4f4844;
}

#form a .key1,
#form a .key2
{
position: absolute;
top: calc( 50% - 6 * var(--u));
right: calc(30 * var(--u));

width: calc(16 * var(--u));	aspect-ratio: 1;


transition: var(--T03);
}

#form a .key2
{
	opacity: 0;
	transform: translateX(-10px);
}

#form a:hover .key1
{
	opacity: 0;
	transform: translateX(+10px);
}
#form a:hover .key2
{
	opacity: 1;
	transform: translateX(0);
}

}
@media screen and (max-width: 767px)
{


#form > .inner
{
width: 90vw;
margin: 0 auto;
padding: 5vw 0 10vw;;
display: block;

}

#form h3
{
font-size: 6vw;
}


#form .imagef
{
width:  70vw;
margin: 0 0 10vw 3vw;
}

#form .sub
{
font-size: 4.5vw;
margin-bottom: 5vw;
}


#form .bbox
{
width: 60vw;
margin: 0 auto;
display: block;
}

#form .button
{
position: relative;
width: 60vw;
padding: 6vw 0;
border: 1px solid #4f4844;
border-radius: calc(95 * var(--u));
}

#form a
{
display: block;
margin-bottom: calc(30 * var(--v));
}

#form .btext
{
font-size: 4vw;
}

#form a .key1,
#form a .key2
{
top: calc( 50% - 15 * var(--u));
width: calc(28 * var(--u));	aspect-ratio: 1;


transition: var(--T03);
}


}

/* ================================================================================
fimage
================================================================================ */
@media print, screen
{

#fimage
{
	background-color: #f6eeea;
	width: 100%;
	padding: 0;
}


#fimage > .inner
{
max-width: 100%;

}

#fimage .image
{
width: 100%;
}


}
@media screen and (max-width: 767px)
{

}

/* ================================================================================
contact
================================================================================ */

#contact
{
	background-color: #f0e6e4;
	width: 100%;
  margin: 0 auto;
  padding-top: calc(30 * var(--u));
}


#contact > .inner
{
width: calc(740 * var(--u));
padding: calc(100 * var(--u)) 0;
}

#contact h4
{
text-align: center;
font-size: calc(32 * var(--v));
color: #4f4844;
margin-bottom: calc(60 * var(--u));
}

#contact .box {
background-color: #f8f9fa;
padding:calc(70 * var(--u)) calc(30 * var(--u)) calc(10 * var(--u)) ;
}

#contact label {
  display: block;
  margin-bottom: calc(44 * var(--u));
  font-size: calc(20 * var(--u));
  color: #333;
}

#contact input[type="text"],
#contact input[type="tel"],
#contact input[type="email"],
#contact select {
  width: 100%;
  padding: calc(14 * var(--u)) calc(10 * var(--u)); /* ←縦にゆとり */
  font-size: calc(20 * var(--u));
  border: 1px solid #ccc;
  border-radius: calc(4 * var(--u));
  box-sizing: border-box;
  margin-top: calc(6 * var(--u));
  line-height: 1.5;
}

#contact input[type="submit"] {
  margin-top: calc(60 * var(--u));
  padding: calc(16 * var(--u)) calc(36 * var(--u)); /* ←大きめボタン */
  font-size: calc(20 * var(--u));
  background-color: #1a5490;
  color: #fff;
  border: none;
  border-radius: calc(10 * var(--u));
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#contact input[type="submit"]:hover {
  background-color: #555;
}

@media screen and (max-width: 767px)
{
    #contact
    {
	background-color: #f0e6e4;
	width: 100%;

      margin: 0 auto;
      padding-top: calc(30 * var(--u));
    }


    #contact > .inner
    {
    width: 90vw;
    padding: calc(100 * var(--u)) 0;
    }
}


/* ======================================== end ======================================== */