/*
Theme Name: himawarigakuen 202508

Text Domain:himawari
Version: 1.1

FOT-TsukuARdGothic Std R CSS

font-family: fot-tsukuardgothic-std,sans-serif;
font-weight: 400;
font-style: normal;


FOT-TsukuARdGothic Std B CSS

font-family: fot-tsukuardgothic-std,sans-serif;
font-weight: 700;
font-style: normal; 

font-family: source-han-sans-cjk-ja, sans-serif;
font-weight: 400,500,700;
font-style: normal;*/





@charset "utf-8";
html {
    font-size: 62.5%;
  }

body{
    background: #FFF8E2;
    color: #393838;
    font-family: source-han-sans-cjk-ja, sans-serif;
    font-size:1.4rem
}
ul li{list-style: none;}
img{vertical-align: bottom;}
.c{color: #F82525;}
.f_{font-family: fot-tsukuardgothic-std,sans-serif;}
.fcw{color: #fff;}
.fwb_{font-family: fot-tsukuardgothic-std,sans-serif;font-weight: 700;}
.f_w_b{font-weight: bold;}
.f_cb{color: #393838;}
.f_cbl{color:#366DA3;}
.f_c_o{color: #EA8913;}
.f_c_r{color:#C64A4A;}
.t_a_r{text-align: right;}
.t_a_l{text-align: left;}
.btn{background: #fff;border-radius: 5px; padding:10px 0; margin:20px 0; transition: .3s;}
.btn_b{border:2px solid #fff;}
.btn.btn_c_o{background: #FFEEB7;} .btn.btn_c_o:hover{background:#fcf6e3;}
.btn img{max-width: 380px;}
.btn_b:hover{border:2px solid #EA8913;}.btn.b_cbl:hover{border-color: #366DA3;}.btn.b_cr:hover{border-color: #C64A4A;}
.btn_none{cursor: default;background: #fcf6e3;}
.btn.c_{text-align: center;}
.btn_cw{background: #FFFFFF;}
.contents img{width: 100%; height: auto;}
.t_c{text-align: center;}
.waku{border: 2px solid #EA8913;}
.imgboader{border: 1px solid #707070;}
.noimg{border:1px solid #eedecb;}
.sp_none,.pc_only,.tb_{
    display: none;
}


.sm_only{
    display: block;
}
.capitno_right{text-align: right;}
.capitno_left{text-align: left;}
.l_no a{opacity: .2;}
.wrap{
    width: 90%;
    margin: 0 auto;
    max-width: 1366px;
}

p{
    font-size: 1.3rem;
    line-height: 1.6;
    margin: 10px 0;
    font-family: source-han-sans-cjk-ja, sans-serif;
}

h1{
    font-family: fot-tsukuardgothic-std,sans-serif; 
    font-style: normal;
}

h1,h2,h3{
    color: #EA8913;
    line-height: 1.5;
}


a{color: #393838; text-decoration: none;}

table{
    width: 100%;
    font-family: source-han-sans-cjk-ja, sans-serif;
}
td,th{padding:10px; line-height: 1.5; text-align: left;}
.m_title{
    font-size: 2.3rem;
    margin-bottom: 20px;
}
img{
    -webkit-backface-visibility: hidden;
    }

header{
    background-size: cover;
    background-position: center center;
    padding: 20px 0 20px;
    
}
.aboutpage header{background-image: url("images/bg_01.jpg"); }
.hoikupage header{background-image: url("images/bg_02.jpg"); }
.programpage header{background-image: url("images/bg_program.jpg"); }
.historypage header{background-image: url("images/bg_history.jpg"); }
.zoompage header{background-image: url("images/bg_03.jpg"); }
.admissionpage header{background-image: url("images/bg_admission.jpg");}
.museumpage header{background-image: url("images/bg_museum2.jpg"); background-position: center right;}
.accesspage header{background-image: url("images/bg_access.jpg"); }
.introductionpage header{background-image: url("images/bg_introduction.jpg"); }
.debutpage header{background-image: url("images/bg_debut.jpg"); }
.newspage header{background-image: url("images/bg_news.jpg"); }
.eventpage header{background-image: url("images/bg_event.jpg"); }
.faqpage header{background-image: url("images/bg_faq.jpg"); }
.inquiryepage header{background-image: url("images/bg_inquiry.jpg"); }
.sitemappage header{background-image: url("images/bg_sitemap.jpg"); }
.privacypage header{background-image: url("images/bg_privacy.jpg"); }
.termspage header{background-image: url("images/bg_terms.jpg"); }
.inquirypage header{background-image: url("images/bg_inquiry.jpg"); }

.headad{background-color: #FFDD23;color:#393838; width: 100%; z-index: 6; text-align: center; font-size: 1.3rem;line-height: 1.9;padding: 15px 0;font-family: fot-tsukuardgothic-std, sans-serif;}

header .wrap{
    position: relative;
    min-height: 537px;
    width: 100%;
}
header .read p{
    font-size: 2.7rem;
    line-height: 1.65;
    font-weight: 700;
    color: #fff;
}
header .logo{
    display: block;
    width: 180px;
    height: 130px;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%) ;
}
header .read {
    max-width: 640px;
    position: absolute;
    bottom: 50px;
    left: 20px;
    height: 140px;
}

header .read p{
    font-size: 2.7rem;
}
header .read p + span{
    display: block;
}
header .read span.en{font-size: 1.5rem;font-weight: normal; line-height: 1.5;color: #fff;}
header span.re{position: absolute;right: 10px;bottom: 10px; color: #fff;}

.breadcrumb{padding:20px 10px; font-size: .9rem;}
@media all and (min-width: 768px) {.breadcrumb{font-size: 1.3rem;}}
.breadcrumb a{text-decoration: none;}
.breadcrumb ul li{display: inline-block;line-height: 1.8;}
.breadcrumb ul li::after{content: "/"; padding:0 10px;}
.breadcrumb ul li:last-child::after{display: none;}
.upper{
    background: #fff;
    padding-bottom: 0px;
}
.upper .wrap{
    width: 100%;
}

.contents{background: #fff;padding-top: 20px; padding-bottom: 40px;}
.totop{
    padding:30px 20px;
    display: flex;
    justify-content: flex-end;
}
.totop a{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.3rem;
    padding:2px;
    line-height: 46px;
    width: 50px;
    height: 50px;
    border:1px solid #EA8913;
    color: #EA8913;
    border-radius: 50%;
}
.bottom_menu{
    height: 60px;
    background: #FABE00;
    position: fixed;
    bottom: 0;
    width: 100%;
    transform: translateY(100%);
    transition: .2s;
    z-index: 10;
}


.bottom_menu.active{transform: translate(0);}

.bar_logo{
    position: absolute;
    top:15px;
    left: 20px;
}

.h_menu {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    position:absolute;
    top:15px;
    right: 20px;
    cursor: pointer;
    z-index: 11;
    background: #FDF9ED;
  }

.h_menu span{
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 20px;/*長さ*/
    background: #F9BE00;
    display: block;
    content: '';
    transition:all 0.3s;
    left: 50%;
    top: 50%;
    margin-left: -10px;
    z-index: 2;
  }
.h_menu span.t {transform: translateY(-10px);}
.h_menu span.b {transform: translateY(10px);}
.h_menu.active span.t{transform: rotate(-45deg) translateY(0px);}
.h_menu.active span.m{transform:translateX(200px);}
.h_menu.active span.b{transform: rotate(45deg) translateY(0px);}

.gnavi_wrap{
    text-align: center;
    position: fixed;
    top: 0px;
    z-index: 9;
    width: 100%;
    display: none;
    height: 100%;
    background:#FFF8E2;
    font-family: fot-tsukuardgothic-std,sans-serif;
    font-weight: 700;
    padding: 20px;
    overflow-y: scroll;  
 }
 .g_navi{
    width: 80%;
    margin: 0px auto;
    padding-top: 40px;
    padding-bottom: 100px;
    
 }
 .g_navi nav{
     margin-bottom: 37px;
 }
 .g_navi nav h2{
     position: relative;
     text-align: left;
     font-size: 1.8rem;
     margin-bottom: 10px;
     cursor: pointer;
 }
 .g_navi nav ul li{
     text-align: left;
     font-size: 1.5rem;
     color: #EA8913;
 }
 .g_navi nav h2 button{
    position: absolute;
    z-index: 3;
    width: 50px;
    height: 100%;
    top:0;
    right: 0;
    text-indent: -9999px;
    background-color: transparent;
    border: 0 none;
    cursor:pointer;
    outline:none;
    overflow: hidden;
    border-left: solid 1px rgba(255, 255, 255, .1);
  }

  .g_navi nav h2 button::after{
    width: 2px;
    height: 14px;
    transition: .2s ease-in-out;
    content: "";
    position: absolute;
    display: block;
    background-color: #333;
    top:0;bottom:0;left:0;right:0;
    margin: auto;
  }

  .g_navi nav h2.is-open button::after{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  .g_navi nav h2 button::before{
    width: 14px;
    height: 2px;
    content: "";
    position: absolute;
    display: block;
    background-color: #333;
    top:0;bottom:0;left:0;right:0;
    margin: auto;
  }

  .g_navi nav ul.submenu{display: none;margin-left: 2rem;}
  .g_navi nav ul li{
      line-height: 1;
      padding: 15px 5px;
  }


  
  

footer{
    padding:50px 0 100px;
}
footer .footer_navi{
    display: none;
}
.f_logo{
    margin-bottom: 40px;
    width: 138px;
}
footer small{font-size: 1.1rem; text-align: center; display: block; padding: 40px 0;}
address{
    font-style: normal;
    font-size: 1.3rem;
    line-height: 2;
    margin: 20px 0;
}

.bottom_navi{
    margin: 20px 0;
}
.bottom_navi nav ul li{
    line-height: 1.5;
    margin-bottom: 10px;
}

@media all and (min-width: 480px){
    header .read {left:50%;transform: translateX(-50%);}
}
@media all and (min-width: 480px) and (max-width: 768px) { 
   
}/* END 768px */
@media all and (min-width: 768px) {

    
.sm_only{display: none;}
.tb_{display: block;}
.sp_none{display: block;}
.f_logo{
    margin-bottom: 50px;
    width: 225px;
}
        
   
}
@media all and (min-width: 768px) and (max-width: 1024px) { 
    .bottom_navi{
        text-align: center;
    }
    .bottom_navi nav ul li{
        display: inline;
        margin: 20px;
    }
}/* END 1024px */

@media all and (min-width: 1024px) { 
    footer .wrap{width: 94%; max-width: auto;}
    header .wrap{min-height: 768px;}

    header .read {
        width: 670px;
        position: absolute;
        bottom: 50px;
        height: auto;
    }
    

    header .read p{
        font-size: 5.2rem;
        line-height: 1.65;
    }
    header .read span.en{font-size: 2.8rem;}
    .upper{
        padding-top: 60px;
    }
    
    p{font-size: 2.0rem;}
    .m_title{font-size: 3.5rem;}
    .bottom_menu{display: none;}
    .pc_only{display:block;}
    .g_navi_pc{
        background: #fff;
        padding: 20px 0;
    }
   
    .g_navi_pc nav ul.mainmenu li:hover ul.submenu {
        transition: .2s ease;
        visibility: visible;
        opacity: 1;
        } 

        .g_navi_pc nav ul.mainmenu li.active ul.submenu {
            transition: .2s ease;
            visibility: visible;
            opacity: 1;
            }
    
    .g_navi_pc nav ul.mainmenu{
        display: flex;
        justify-content: center;
        font-family: source-han-sans-cjk-ja, sans-serif;
        font-weight: bold;
        
        }
        .g_navi_pc nav ul.mainmenu > li{
            position: relative;
            line-height: 2rem;
            font-size: 1.8rem;
            color: #393838;
            padding-right: 80px;
            cursor: pointer;
            }
            .g_navi_pc nav ul.mainmenu > li:last-child{
                padding-right: 0;
            }
            .g_navi_pc nav ul.mainmenu li ul.submenu{
                visibility: hidden;
                opacity: 0;
                transition: .2s ease;
                position: absolute;
                width: 100%;
                top: 27px;
                left: 0;
                background: #fff;
                border-radius: 10px;
                box-shadow: #ccc 0px 0px 5px;
                min-width: 280px;
                z-index: 2;
            }
            .g_navi_pc nav ul.mainmenu li ul.submenu li{
                font-size: 1.7rem;
                line-height: 1.7rem;
                padding-bottom: 10px;
                padding-left: 10px;
                margin: 30px 0;
               
            }
            .g_navi_pc nav ul.mainmenu li ul.submenu li::before{
                content: "";
                width: 14px;
                height: 14px;
                display: inline-block;
                border: 3px solid rgba(57,56,56,.2);
                border-radius: 50px;
                margin-right: 10px;
                transition: .2s ease;
              
            }
            .g_navi_pc nav ul.mainmenu li ul.submenu li.l_no,.g_navi_pc nav ul.mainmenu li ul.submenu li.l_no a{
                cursor: default;
            }
            .g_navi_pc nav ul.mainmenu li ul.submenu li:hover::before{
                border-color: #EA8913;
            }
            .g_navi_pc nav ul.mainmenu li ul.submenu li.l_no:hover::before{
                border-color: rgba(57,56,56,.2);
            }
            .g_navi_pc nav ul.mainmenu li ul.submenu li span{
            position: relative;
            /* background: linear-gradient(transparent 70%, #EA8913 30%); */
            }
            .g_navi_pc nav ul.mainmenu li ul.submenu li span::before{
                content: "";
                width: 0;
                height: 3px;
                position: absolute;
                bottom: 0px;
                left: 0;
                background-color: rgba(243,168,75);
                transition: .2s ease;
               
                
            }
            .g_navi_pc nav ul.mainmenu li ul.submenu li:hover span::before{width: 100%;}
        footer .parent_box{
            display: flex;
            justify-content:space-around;
            margin-bottom: 50px;

        }
       footer .parent_box > div.box{
            width: 340px;
        }
        .bottom_navi{
            text-align: center;
        }
        .bottom_navi nav ul li{
            display: inline;
            margin: 20px 40px;
        }
       
       footer .footer_navi{
            width: 680px;
            display: flex;
            padding-top: 80px;
            justify-content: end;
        }
        footer .footer_navi h2{font-size: 2.5rem; margin-bottom: 17px;}
        footer .footer_navi nav ul {margin-bottom: 40px;}
        footer .footer_navi nav ul li{font-size: 2.0rem; padding:20px 10px 20px 15px; font-weight: bold;}
        footer .footer_navi nav ul li a{color: #EA8913;}
        .footer_navi .bo{
            width: 46%;
            max-width: 320px;
        }

        address{
            font-size: 1.8rem;
            line-height: 2.4;
        }
        
}/* END 1280px */

 



/* TOP PAGE */
.come{font-size: 1.1rem;}
.homepage .contents .wrap{max-width: 1118px; width: 80%;}
.course{padding: 40px 0; color: #EA8913;}

.course_nav .btn{border: 3px solid #EA8913;padding: 28px 15px; text-align: center; color: #EA8913; border-radius: 10px; font-size: 1.5rem;font-weight: bold;margin: 24px auto 0; display: block;}

.course_nav .btn.cb{color:#366DA3;border-color:#366DA3;}
.internationalbox{color: #fff;}
.internationalbox h2 span{display: block;}
.internationalbox .cach{font-size: 1.5rem;line-height: 25px; background: #fff;border-radius: 25px; padding: 0px 16px; color: #D17300;margin-bottom: 15px;}

.nannai{}
/* Top PAGE */

article p.tell{font-size: 1.6rem; font-weight: bold;}
.homepage article.box.first{
    margin-top:40px;
}
article.box p + img{margin-top: 30px;}

.box1 .btn{
    margin-top: 40px;
}
article.box .bo{
    margin-bottom: 40px;
}




.spred_box.spred_an1 .wrap{
    width: 100%;
}

.spred_box.spred_an1 .textbox{
    width: 80%;
    margin:0 auto;
    padding: 40px 0;
}
.spred_box.spred_an1 .textbox nav.nannai{margin-top: 30px;}
.spred_box.spred_an1 .textbox nav.nannai ul li{margin-bottom: 10px;font-size: 1.5rem;}
.spred_box.spred_an1 .textbox nav.nannai ul li::before{content: "";background-image: url("images/sikaku_orange.svg");display: inline-block;height: 1.5rem; width: 2.5rem; vertical-align: middle;background-repeat: no-repeat;background-size: contain; background-position: center;}


.spred_box.spred_an1 .textbox nav.nannai ul li a{color: #EA8913;}
.spred_box.spred_an1 .textbox nav.nannai ul li:last-child a{color: #366DA3;}
.spred_box.spred_an1 .textbox nav.nannai ul li:last-child::before{content: "";background-image: url("images/sikaku_blue.svg");display: inline-block;height: 1.5rem; width: 2.5rem; vertical-align: middle;background-repeat: no-repeat;background-size: contain; background-position: center;}
.spred_box.spred_an1 article.box{
    margin-bottom: 0;
}

.homepage .contents .newsArea.wrap{
    width: 100%;
    margin-bottom: 80px;
}
.news_parent{
    margin-top: 120px;
}

.news_parent h2{
    font-size: 2.0rem;
    margin-left: 10%;
    margin-bottom: 15px;
}

ul.newslist li{
    border-top: 1px solid #FF9933;
    padding: 10%;
    
}
ul.newslist li:last-child{ border-bottom: 1px solid #ff9933;}

    

.newslist .date_box{display: flex; margin-bottom: 20px;}
.newslist .date_box time{font-size: 1.3rem;line-height: 2; margin-right: 20px;}
.newslist .date_box .catbox{font-size: 1.2rem;border: 1px solid #FF9933;padding: 5px;line-height: 1;}
.newslist .textbox {margin-top: 20px;}
.newslist .textbox h3{ color:#393838; font-size: 2.2rem;}
.newslist .textbox p{ color:#393838; font-size: 1.4rem;}

.spred_box.spred_an3{padding:40px 0;}
.spred_box.spred_an2{padding:40px 0;}

.spred_box.bgc1{background: #F7DED6;}
.spred_box.bgc2{background: #E7F2FD;}
.spred_box.bgc3{background: #FCF3B977;}
.spred_box.bgc4{background: #366DA3D6;}
.box.alc{align-items: center;}

.spred_box.spred_an2 .imgbox{ padding: 20px 40px;
}
.spred_box.spred_an2 .imgbox img{transform: rotate(5deg);}
.news_go{font-weight: bold; margin-left: 10%; margin-top: 20px;}
.vtr_wrap{width: 100%; aspect-ratio: 16 / 9;}
.vtr_wrap iframe{ width:100%;height:100%;}


@media all and (min-width: 768px) {
    article.box p + img{padding-right: 80px;}
    
    .homepage article.box.first{
        margin-top: 90px;
    }
    article.box div.box2.spimg{
        margin-top: 40px;
    }
    article.box:first-child .bo p{
        font-size: 1.8rem;
    }
    article.box .bo p{
        font-size: 1.8rem;
    }
  
    article.box{
       display: flex;
       justify-content: space-between;
       align-items: center;

    }
    article.box .box1,article.box .imgbox{
        width: 48%;
    }
    article.box .imgbox.sp_none{
        padding: 3%;
    }
  

    .spred_box .box .imgbox,.spred_box .box .textbox{
        width: 50%;
    }
    .spred_box.spred_an1 .textbox,.spred_box.spred_an3 .textbox{
        padding: 20px 60px 20px;
    }
    .spred_box .textbox h{
        margin-top: 70px;
    }
    .spred_box .textbox p{
        font-size: 1.8rem;
    }
  
   
    .news_parent{
        margin-top: 120px;
        display: flex;
        justify-content: space-between;
    }

    .news_parent h2{
        width: 180px;
        font-size: 3.0rem;
        margin-left: 0;
    }
    div.newslist_parent{
        width: calc(100% - 200px);
    }
    ul.newslist li{
        padding: 0;
    }

    ul.newslist li a{
        display: flex;
        padding: 30px 40px;
        width: 100%;
        justify-content: space-between;
    }

    ul.newslist li{
        border-right: 1px solid #FF9933;
        border-left: 1px solid #FF9933;
        border-top: 1px solid #FF9933;
    }

.newslist li a .imgbox{width: 267px;}
.newslist li a .textbox{width: calc(100% - 330px); margin-top:0;}


    ul.newslist li:first-child{ border-radius: 7px 7px 0 0;}
ul.newslist li:last-child{ border-radius: 0 0 7px 7px;border-bottom: 1px solid #ff9933;}

.news_go{font-weight: bold; margin-left: 0%;}

.course{ text-align: center; padding-bottom: 0; position: relative;}
.course::after{content: "";width: 100%; height: 50px; background-color: #fff;position: absolute; bottom: 0;left: 0;z-index: -1;}
.course_nav ul{display: flex; margin-top: 60px;}
.course_nav li{width: 50%;}
.course_nav .n1 .btn{width: 310px;margin: 0 auto;font-size: 2.3rem;}
.course_nav .n2 .btn{width: 478px;margin: 0 auto;font-size: 2.3rem;}
.internationalbox{padding: 60px 0;}
.internationalbox.spred_box.spred_an1 .textbox{padding-left: 10px;}
.internationalbox .box{flex-direction: row-reverse;}
.internationalbox h2 {font-size: 3rem;}
.internationalbox h2 span{}
.internationalbox .cach{font-size: 2.4rem; line-height: 45px;}
    
}
@media all and (min-width: 1024px) { 


    
    .come{
        font-size: 1.6rem;
    }
    .m_title.title_ms{
        font-size: 3.0rem;
    }
    .spred_box.spred_an1 .wrap{
        max-width: 1366px;
    }
    .spred_box.spred_an2 .imgbox img{
        width: 90%;
        margin-left: 10%;
    }
   
}



/* CATEGOERY PAGE */
.select_parent{
    padding: 80px 0;
    background: #A7A7A71A;
}
.selectbox {
    width:90%;
    max-width: 530px;
    margin:1em auto;
  position:relative;

}
select{
  -webkit-appearance:none;
    appearance:none;
  width:100%;
  padding:15px 20px;
  box-sizing:border-box;
  font-size:1em;
  border:#393838 1px solid;
  border-radius:5px;
  background:#fff;
  text-align: center;
}
.selectbox::after{
  content:"";
  display:block;
  width:10px;
  height:10px;
  position:absolute;
  right:4%;
  top:35%;
  border-bottom:#333 2px solid;
  border-right:#333 2px solid;
  transform:rotate(45deg)translateY(-30%);
}

@media all and (min-width: 1024px) { 

    .selectbox {
       font-size: 2.6rem;
    }
    .selectbox::after{
        
        width:20px;
        height:20px;
        position:absolute;
        right:4%;
        top:35%;
        border-bottom:#333 2px solid;
        border-right:#333 2px solid;
        transform:rotate(45deg)translateY(-30%);
      }
      
}