/* 全体 */
/* *{
    outline: 2px red solid;
} */

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    background-color: #984d47;
    background-image: url(images/bg_red.png);
    background-repeat: repeat;
    font-size: 24px;
    font-weight: 400;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-style: normal;
    color: #282828;
}

.sp-br2 {
    display: none;
}

#decoTOP1 {
    position: absolute;
    top: 610px;
    z-index: 40;
    width: 100%;
    max-width: 471px;
    height: auto;
    pointer-events: none;
}

#decoTOP2 {
    position: absolute;
    top: 1013px;
    right: 0;
    z-index: -1;
    width: 100%;
    max-width: 479px;
    height: auto;
    pointer-events: none;
}

#decoBTM1 {
    position: absolute;
    top: 3400px;
    z-index: -1;
    width: 100%;
    max-width: 272px;
    height: auto;
    pointer-events: none;
}

#decoBTM2 {
    position: absolute;
    top: 3400px;
    right: 0;
    z-index: -1;
    width: 100%;
    max-width: 276px;
    height: auto;
    pointer-events: none;
}

.fade-in {
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.6s ease;
}

.fade-in.show {
    transform: translateY(0);
    opacity: 1;
}

/* header */
header {
    overflow: hidden;
}

#wrap_header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 700px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom-left-radius: 50% 50px;
    border-bottom-right-radius: 50% 50px;
    background-color: #67281f;
    background-image: url(images/FV.png);
    background-size: cover;
    transition: background-image 2s ease-in-out;
}

#wrap_header::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 50% 50px;
    border-bottom-right-radius: 50% 50px;
    background: linear-gradient(rgba(63, 56, 49, .35));
    content: "";
}

#wrap_headLogo {
    z-index: 2;
    text-align: center;
}

#wrap_headLogo img {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
}

#wrap_header h1 {
    padding-bottom: 15px;
    font-size: 50px;
    letter-spacing: .1em;
}

#wrap_header p {
    font-weight: 300;
    font-size: 25px;
}

/* header - ハンバーガーメニュー */
.hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.hamburger__line {
    position: absolute;
    left: 11px;
    width: 26px;
    height: 2px;
    background-color: #f1f2f4;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
    transition: all .4s;
}

.hamburger__line:nth-of-type(1) {
    top: 14px;
}

.hamburger__line:nth-of-type(2) {
    top: 23px;
}

.hamburger__line:nth-of-type(3) {
    top: 32px;
}

/* header - ハンバーガーメニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
    transform: translateY(9px) rotate(-45deg);
}

.hamburger.active .hamburger__line:nth-of-type(2) {
    opacity: 0;
}

.hamburger.active .hamburger__line:nth-of-type(3) {
    transform: translateY(-9px) rotate(45deg);
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    transform: translateX(-100%);
    width: 300px;
    height: 100vh;
    background-color: #bfb9a3;
    box-shadow: 2px 0 4px rgba(0, 0, 0, .1);
    transition: transform .4s;
}

.nav.active {
    transform: translateX(0);
}

.nav__list {
    margin: 0;
    padding: 100px 0 0;
}

.nav__item {
    padding: 0 20px;
}

.nav__link {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f1f2f4;
    color: #67281f;
    font-size: 24px;
}

.nav__link::before {
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: transparent;
    content: "";
    transition: 0.3s;
}

.nav__link:hover::before {
    transform: translateY(25%);
    width: 0.25em;
    height: 0.25em;
    margin-right: 36px;
    background-color: #67281f;
}

.nav__list img {
    padding-top: 50px;

}

/* main */
main {
    width: 100%;
    margin: 0 auto;
}

.h2_ttl {
    padding: 30px 0;
    color: #67281f;
    text-align: center;
}

.h2_ttl h2 {
    position: relative;
    font-weight: 400;
    font-size: 40px;
    font-family: "Kaisei Opti", serif;
    font-style: normal;
}

.h2_ttl h2::after {
    display: inline-block;
    position: absolute;
    left: calc(50% - 80px);
    bottom: -10px;
    width: 160px;
    height: 1px;
    content: '';
    background-color: #67281f;
}

.h2_ttl p {
    padding: 20px 0;
    font-size: 20px;
}

/* infomation */
#wrap_info {
    position: relative;
    z-index: 50;
    width: 66.67%;
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 30px 30px;
    border-radius: 10px;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, .3);
    background-color: #bfb9a3;
    color: #67281f;
}

#Infomation p {
    font-size: 25px;
}

.newinfo {
    display: flex;
    justify-content: center;
    position: relative;
    padding-left: 70px;
    border-bottom: 1px dotted #67281f;
    text-align: center;
    line-height: 1.5;
}

.newinfo time {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    white-space: nowrap;
}

.newinfo span {
    flex-grow: 1;
    max-width: calc(66.67% - 20px);
    text-align: left;
}

/* Concept */
#Concept {
    width: 100%;
}

#wrap_concept {
    box-shadow: 0 0 0 1px #e6e4d5;
    background-color: #e6e4d5;
    text-align: center;
}

.wrap_bgcircle {
    overflow: hidden;
}

.bgcircle_top {
    height: 200px;
    margin-left: -100px;
    margin-right: -100px;
    padding-left: 100px;
    padding-right: 100px;
    border-top-left-radius: 50% 200px;
    border-top-right-radius: 50% 200px;
    background-color: #e6e4d5;
}

.bgcircle_bottom {
    height: 50px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom-left-radius: 50% 50px;
    border-bottom-right-radius: 50% 50px;
    background-color: #e6e4d5;
}

.bgcircle_bottom::after {
    position: absolute;
    z-index: -1;
    left: 15px;
    width: 100%;
    height: 50px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 9px 8px -3px rgba(0, 0, 0, .3);
    border-bottom-left-radius: 50% 50px;
    border-bottom-right-radius: 50% 50px;
    content: '';
}

#KitchenTool img {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
}

#wrap_concept h3 {
    padding: 30px;
    line-height: 1.5em;
    color: #67281f;
    font-size: 35px;
    font-family: "Kaisei Opti", serif;
}

.class_line::before {
    margin-right: 50px;
}

.class_line::after {
    margin-left: 50px;
}

#Concept_desc p {
    max-width: 650px;
    margin: 0 auto;
    padding-bottom: 35px;
}

/* classes */
#wrap_classes {
    position: relative;
    max-width: 1000px;
    margin: 50px auto 0;
    border-radius: 20px;
    background-color: #f1f2f4;
}

#wrap_classes h3 {
    padding: 55px 0 75px 0;
    color: #67281f;
    font-size: 35px;
    font-family: "Kaisei Opti", serif;
    text-align: center;
}

#wrap_classes p {
    font-size: 25px;
}

.wrap_h4 {
    padding-bottom: 50px;
}

.wrap_h4 h4 {
    color: #984d47;
    font-size: 45px;
    font-family: "Kaisei Opti", serif;
}

.h4_top {
    color: #9d8362;
}

.bg_circle {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #9d8362;
}

.bg_circle p {
    margin: 0;
    color: #e6e4d5;
    text-align: center;
}

.p_color {
    color: #9d8362;
}

.size20 {
    padding-left: 5px;
    font-size: 20px;
}

.size30 {
    font-size: 30px;
    color: #984d47;
}

.size35 {
    font-size: 35px;
}

.size40 {
    padding-left: 10px;
    font-size: 40px;
}

/* classes-洋菓子教室 */
#sweetclass {
    display: flex;
    gap: 100px;
    padding-bottom: 60px;
    text-align: left;
}

#sweetclass img {
    width: 100%;
    max-width: 550px;
    height: auto;
    margin-left: -100px;
    box-shadow: 10px 10px 15px -8px rgba(157, 131, 98, 0.35);
}

#sweet_desc {
    max-width: 370px;
    max-height: 300px;
    padding: 0 10px;
}

.amount_sweet1 {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding-bottom: 20px;
}

.amount_sweet2 {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 20px;
}


/* classes-ライブ配信 */
#liveclass {
    display: flex;
    gap: 100px;
    flex-direction: row-reverse;
    padding-bottom: 35px;
    text-align: right;
}

#liveclass img {
    width: 100%;
    max-width: 550px;
    height: auto;
    margin: 0 -100px 0 0;
    box-shadow: -10px 10px 15px -8px rgba(157, 131, 98, 0.35);
}

#live_desc {
    max-width: 350px;
    max-height: 235px;
    padding: 0 10px;
}

.amount_live {
    display: flex;
    gap: 10px;
    justify-content: end;
    align-items: baseline;
    padding-bottom: 30px;
}

/* classes-ボタン */
#class_btn {
    display: inline-flex;
    gap: 5px;
    position: relative;
    width: 100%;
    max-width: 260px;
    padding: 7px 7px 7px 45px;
    border-radius: 100vh;
    border: 2px solid #984d47;
    background-color: #984d47;
    color: #e6e4d5;
    text-align: center;
    letter-spacing: -0.08em;
    transition-duration: 0.3s;
}

#class_btn:hover {
    background: #f1f2f4;
    color: #984d47;
}

#class_btn .arrow {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-image: url("images/arrow_icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.3s;
}

#class_btn:hover .arrow {
    background-image: url("images/arrow_red.png");
}

#wrap_classbtn {
    padding-bottom: 45px;
}

/* trial */
#trial {
    text-align: center;
}

#wrap_trial {
    padding-top: 60px;
    padding-bottom: 30px;
}

#trial p,
#trial a {
    color: #e6e4d5;
}

#trial h2 {
    padding: 5px 0 10px 0;
    color: #e6e4d5;
    font-size: 40px;
    font-family: "Kaisei Opti", serif;
}

#wrap_iframe iframe {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 8 / 5;
}

#trialLink {
    display: flex;
    justify-content: center;
    padding-top: 35px;
    padding-bottom: 55px;
}

#trialLink img {
    width: 40px;
    height: auto;
    margin-bottom: 10px;
}

#trialLink p {
    display: inline-block;
    margin-left: 25px;
    font-size: 20px;
    transition: letter-spacing 0.3s;
}

#trialLink p:hover {
    letter-spacing: 0.05em;
}

/* trial - popup */
#trial #wrap_trial button {
    padding-bottom: 3px;
    color: #e6e4d5;
    background-image: linear-gradient(#e6e4d5, #e6e4d5);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

#trial #wrap_trial button:hover {
    background-position: bottom left;
    background-size: 100% 1px;
}

#wrap_popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

#popup_inside {
    position: relative;
    width: 100%;
    max-width: 80%;
    margin: 10% auto;
    padding: 50px;
    border-radius: 10px;
    background: #e6e4d5;
    text-align: center;
}

#popup_p h2 {
    padding-bottom: 5px;
    color: #984d47;
}

#popup_p p {
    padding-bottom: 10px;
    color: #9d8362;
    font-weight: bold;
    font-size: 20px;
}

#popup_close {
    position: absolute;
    top: 5px;
    right: 20px;
    cursor: pointer;
}

#popup_p table {
    overflow: hidden;
    margin: 0 auto;
    width: 90%;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #984d47;
}

#popup_p thead th {
    padding: 8px;
    background-color: #984d47;
    color: #f1f2f4;
    text-align: center;
}

#popup_p tbody td {
    background-color: #f1f2f4;
}

#popup_p tbody tr:nth-child(even) td {
    background-color: #bfb9a3;
}

#popup_p tbody {
    border-radius: 0 0 10px 10px;
}

#popup_p tbody tr td:first-child {
    padding: 8px 20px 0;
    text-align: left;
}

#popup_p tbody tr td:last-child {
    padding: 8px;
}



/* Schedule */
#Schedule {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #e6e4d5;
    text-align: center;
}

#sc_desc {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    padding-bottom: 30px;
}

#sc_desc p {
    padding-left: 10px;
    padding-right: 5px;
    color: #9d8362;
    font-size: 20px;
}

#borderBox {
    padding: 5px 7px;
    border: #9d8362 1px solid;
    background-color: #9d8362;
}

#borderBox p {
    margin: 0;
    padding: 0;
    color: #e6e4d5;
}

#sc_frame {
    width: 66.67%;
    max-width: 880px;
    min-height: 400px;
    height: auto;
    margin: 0 auto;
    padding-bottom: 65px;
    aspect-ratio: 880 / 600;
}

#sc_frame iframe {
    width: 100%;
    height: 100%;
}

/* Q&A */
#QA {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0px 16px 30px -20px rgba(0, 0, 0, .5);
    background-color: #bfb9a3;
}

#wrap_QA {
    width: 100%;
    max-width: 83.3%;
    margin: 0 auto;
}

.QAtab {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    color: #282828;
}

.QAtab input {
    display: none;
}

/* Q&A - 質問 */
.QAtab label {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 83.33%;
    padding: 15px 2em 15px 2.5em;
    border-radius: 5px;
    background: #e6e4d5;
    color: #282828;
    line-height: 1.5em;
    word-break: break-word;
    cursor: pointer;
}

.QAtab label::before {
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
    padding-right: 0.5em;
    font-size: 25px;
    content: 'Q.';
}

.QAtab label:hover {
    color: #984d47;
    font-weight: bold;
    transition: all 0.3s;
}

/* Q&A - 質問の＋アイコン */
.QAtab label::after {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 2em;
    height: 2em;
    color: #9d8362;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 2em;
    content: '+';
    transition: transform 0.3s;
}

.Answer {
    position: relative;
    overflow: hidden;
    max-height: 0;
    padding: 0 0 0 2.5em;
    border-radius: 0 0 5px 5px;
    font-size: 20px;
    transition: max-height 0.2s;
}

.Answer::before {
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
    padding: 0;
    font-size: 25px;
    content: 'A.';
}

.Answer p {
    margin: 0.8em 0.8em 0.8em 0;
}

.QAtab input:checked~.Answer {
    width: 83.33%;
    max-height: 40em;
    margin: 0 auto;
    border: 10px solid #e6e4d5;
}

.QAtab input:checked~label {
    border-radius: 5px 5px 0 0;
    color: #984d47;
}

.QAtab input[type=checkbox]:checked+label::after {
    transform: translateY(-50%) rotateZ(45deg);
    transform-origin: 50% 50%;
}

/* QA - link */

#QA_link {
    width: 83.33%;
    padding-bottom: 65px;
    text-align: right;
}

#QA_link a {
    background-image: linear-gradient(#67281f, #67281f);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    color: #67281f;
    font-size: 20px;
    transition: background-size 0.3s;
}

#QA_link a:hover {
    background-position: bottom left;
    background-size: 100% 1px;
}

/* Profile */
#wrap_profile {
    width: 100%;
    max-width: 83.33%;
    margin: 0 auto;
    padding: 75px 0 65px 0;
}

#wrap_profile h2 {
    padding-bottom: 50px;
    color: #e6e4d5;
    font-size: 50px;
    font-family: "Kaisei Opti", serif;
    text-align: center;
    letter-spacing: 0.05em;
}

.prof_line {
    display: flex;
    justify-content: center;
    align-items: center;
}

.prof_line::before,
.prof_line::after {
    height: 1px;
    width: 95px;
    background-color: #e6e4d5;
    content: "";
}

.prof_line::before {
    margin-right: 50px;
}

.prof_line::after {
    margin-left: 50px;
}

#wrap_profile img {
    display: block;
    width: 100%;
    max-width: 417px;
    height: auto;
    margin: 0 auto;
    padding-bottom: 30px;
}

#wrap_profile h3 {
    padding-bottom: 30px;
    color: #e6e4d5;
    font-size: 40px;
    font-family: "Kaisei Opti", serif;
    text-align: center;
}

#wrap_profile p {
    max-width: 825px;
    margin: 0 auto;
    color: #e6e4d5;
    font-size: 24px;
    text-align: center;
}

/* Forms */
#Forms {
    margin: 60px 0 100px 0;
}

#form_box {
    width: 83.33%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, .3);
    background-color: #e6e4d5;
}

#wrapForms {
    width: 83.33%;
    margin: 0 auto;
}

#formSelect {
    padding-bottom: 30px;
    text-align: center;
}

label {
    color: #984d47;
    font-size: 20px;
}

label[for="formApp"],
label[for="formInquiry"] {
    color: #282828;
}

#selectApp label,
#selectInquiry label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 15px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    padding: 10px;
    border-radius: 3px;
    background-color: #f1f2f4;
    color: #282828;
}

input[name="name"],
input[name="tel"] {
    width: 31.25%;
    min-width: 200px;
}

input[name="email"] {
    width: 80%;
    min-width: 250px;
}

textarea {
    width: 80%;
    min-width: 250px;
    height: 100px;
}

select {
    width: 31.25%;
    min-width: 200px;
}

.submitBtn {
    padding: 15px 0 55px 0;
    text-align: center;
}

input[type="submit"] {
    display: inline-block;
    width: 180px;
    height: 60px;
    padding: 10px auto;
    border-radius: 100vh;
    border: 1px solid #984d47;
    background-color: #984d47;
    color: #e6e4d5;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    transition-duration: 0.3s;
}

input[type="submit"]:hover {
    background-color: #f1f2f4;
    color: #984d47;
}

/* Access */
#wrap_Access {
    padding-bottom: 100px;
    box-shadow: 0 0 0 1px #e6e4d5;
    background-color: #e6e4d5;
}

#ac_desc {
    display: flex;
    gap: 60px;
    justify-content: center;
    width: 83.33%;
    margin: 0 auto;
}

#iframe_container {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 450 / 357;
}

#iframe_container iframe {
    width: 100%;
    height: 100%;
}

#ac_adress {
    color: #67281f;
}

#ac_adress h3 {
    margin-bottom: 35px;
    font-weight: bold;
    font-size: 40px;
}

#ac_adress li {
    max-width: 410px;
    margin-bottom: 40px;
    font-size: 24px;
}

/* footer */
footer {
    display: flex;
    flex-direction: column;
    min-height: 226px;
    background-color: #bfb9a3;
}

#wrap_footer {
    display: flex;
    gap: 60px;
    align-items: center;
    width: 83.33%;
    margin: 0 auto;
    padding: 35px 0;
}

#wrap_footer img[id="footer_logo"] {
    width: 100%;
    max-width: 268px;
    height: auto;
}

#footer_list img {
    width: 35px;
    height: auto;
    transition: transform .3s;
}

#footer_list img:hover {
    transform: scale(0.9);
}

#wrap_footer li {
    margin-bottom: 30px;
}

#wrap_footer .linkline {
    background-image: linear-gradient(#e6e4d5, #e6e4d5);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    color: #e6e4d5;
    font-size: 15px;
    transition: background-size 0.3s;
}

#wrap_footer .linkline:hover {
    background-position: bottom left;
    background-size: 100% 1px;
}

#copy_bar {
    padding: 10px;
    background-color: #67281f;
    color: #e6e4d5;
    font-size: .5em;
    text-align: center;
}


/* --- レスポンシブ対応 --- */
@media (max-width: 1200px) {

    #decoBTM1,
    #decoBTM2 {
        top: 4000px;
    }

    .wrap_h4 {
        padding-bottom: 30px;
        text-align: center;
    }

    #sweetclass {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    #sweetclass img {
        width: 80%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 55 / 36;
    }

    #liveclass {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    #liveclass img {
        width: 80%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 55 / 36;
    }

    #live_desc {
        text-align: center;
    }

    .amount_live {
        justify-content: center;
        padding-bottom: 20px;
    }
}

@media (max-width: 916px) {

    /* trial */
    #wrap_iframe iframe {
        width: 80%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 8 / 5;
    }

    /* schedule */
    #sc_desc {
        flex-direction: column;
    }

    #borderBox {
        margin-bottom: 5px;
    }

    .sc_p {
        margin-top: 10px;
    }

    /* Access */
    #wrap_Access {
        padding-bottom: 60px;
    }

    #ac_desc {
        flex-direction: column;
        align-items: center;
    }

    #ac_adress h3 {
        text-align: center;
    }
}

@media (max-width: 844px) {

    /* 全体844 */
    #decoBTM1,
    #decoBTM2 {
        top: 3000px;
        max-width: 180px;
        height: auto;
    }
}

@media (max-width: 768px) {

    /* 全体 */
    body {
        font-size: 18px;
    }

    #decoTOP1 {
        top: 450px;
    }

    #decoTOP2 {
        top: 900px;
    }

    #decoBTM1,
    #decoBTM2 {
        display: none;
    }

    /* header */
    #wrap_header {
        height: 500px;
        background-position: center;
    }

    #wrap_header p {
        padding: 0 10px;
    }

    .nav {
        width: 100%;
    }

    .nav__link {
        font-size: 30px;
        text-align: center;
    }

    .hamburger.active .hamburger__line:nth-of-type(1),
    .hamburger.active .hamburger__line:nth-of-type(2),
    .hamburger.active .hamburger__line:nth-of-type(3) {
        box-shadow: none;
    }

    /* main */
    .h2_ttl h2 {
        font-size: 30px;
    }

    /* information */
    #wrap_info {
        width: 80%;
    }

    .newinfo {
        flex-direction: column;
        padding: 10px 0;
    }

    .newinfo time {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        margin-bottom: 5px;
        padding: 5px 7px;
        border: #9d8362 1px solid;
        background-color: #9d8362;
        color: #e6e4d5;
    }

    .newinfo span {
        flex-grow: 1;
        max-width: 100%;
        text-align: center;
    }

    /* concept */
    #wrap_concept h3 {
        font-size: 25px;
    }

    #Concept_desc p {
        width: 66.67%;
    }

    /* classes */
    #wrap_classes h3 {
        font-size: 25px;
    }

    #wrap_classes p {
        font-size: 20px;
    }

    #class_btn {
        max-width: 220px;
    }

    /* trial */
    #trial h2 {
        font-size: 30px;
    }

    /* profile */
    #wrap_profile h2 {
        font-size: 30px;
    }

    #wrap_profile p {
        font-size: 18px;
    }

    /* footer */
    #wrap_footer {
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        text-align: center;
    }
}

@media (max-width: 701px) {
    .sp-br1 {
        display: none;
    }

    .sp-br2 {
        display: inline;
    }
}

@media (max-width: 320px) {

    /* 全体-320 */
    #decoTOP2 {
        top: 800px;
    }

    .h2_ttl {
        padding: 20px 0 10px 0;
    }

    .h2_ttl h2 {
        font-size: 20px;
    }

    .h2_ttl p {
        padding: 15px 0;
        font-size: 16px;
    }

    .bgcircle_top {
        height: 150px;
        border-top-left-radius: 50% 150px;
        border-top-right-radius: 50% 150px;
    }

    /* information-320 */
    #Infomation p {
        font-size: 16px;
    }

    /* Concept-320 */
    #Concept_desc p {
        font-size: 0.8em;
    }

    /* classes-320 */
    .sp-br {
        display: inline;
    }

    #wrap_classes h3 {
        padding: 30px 0;
    }

    .wrap_h4 h4 {
        font-size: 30px;
    }

    .size35 {
        font-size: 30px;
    }

    .size40 {
        font-size: 30px;
    }

    #class_btn .arrow {
        left: 8px;
        width: 22px;
        height: 22px;
    }

    #class_btn {
        width: auto;
        padding: 7px 7px 7px 35px;
        font-size: 0.85rem;
    }

    .bg_circle {
        width: 64px;
        height: 64px;
    }

    /* trial */
    #trialLink p {
        margin-left: 0;
        font-size: .9rem;
    }

    /* schedule */
    #sc_frame {
        width: 80%;
    }

    /* QA */
    .QAtab label {
        font-size: 12px;
    }

    .QAtab label::before {
        left: .3em;
        font-size: 18px;
    }

    .QAtab label::after {
        font-size: 16px;
    }

    #QA_link a {
        font-size: 12px;
    }

    .Answer {
        font-size: 12px;
    }

    .Answer::before {
        left: .4em;
        font-size: 18px;
    }

    /* profile */
    #wrap_profile {
        padding: 60px 0 30px 0;
    }

    .prof_line::before {
        margin-right: 20px;
    }

    .prof_line::after {
        margin-left: 20px;
    }

    .prof_line::before,
    .prof_line::after {
        width: 20px;
    }

    #wrap_profile p {
        font-size: 15px;
    }

    /* forms */
    #wrapForms label {
        font-size: 14px;
    }

    input[name="name"],
    input[name="tel"],
    input[name="email"],
    select,
    textarea {
        min-width: 90%;
    }

    /* Access */
    #ac_adress h3 {
        font-size: 30px;
    }

    #ac_adress li {
        margin-bottom: 20px;
        font-size: 12px;
    }
}