@charset "utf-8";
@import url(menu.css);
@import url(comon.css);
/*
Theme Name:meenglish2024
Theme URI:https://taipa.meenglish.space/
Description:meenglishのテーマです。
Version:1.0.0
Author:honda
Author URI:https://taipa.meenglish.space/
*/


html{
    font-size:100%;
}
body{
    padding-top:0px;
    color:#212121;
    background:#fff;
    font-size: clamp(13px,calc(13px + ((1vw - 3.2px) * 0.669)),16px); /*320~768pxの間14px~16pxで可変*/;
    font-family: "kinuta-maruminyoshino-stdn", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;
}

img {
    max-width: 100%;
    height: auto;
}
a{
    text-decoration: none;
    color: #000;
}
a:hover{
    text-decoration: none;
    color: #B62536;
}
p{
    line-height: 1.7;
}
li{
    list-style: none;
}
/* トップ */
.first_v{
    background-image: url("imgs/top_s.jpg");
    height: 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 100.25%;
}
.logo{
    position:absolute;
    width: 32%;
    margin-top: -61%;
    left: 4%;
}
.logo1{
    position:absolute;
    width: 8rem;
    left: 30%;
    margin: 0;
} 
.box1{
    border: 5px double #B62536 ;
    padding: 1rem;
}
.box2{
    border: 1px solid #B62536;
    padding: 2rem;
    margin: 1rem;
}
.sub_title{
    position: relative;
    padding: 0.7em;
  font-size: clamp(20px,calc(20px + ((1vw - 3.2px) * 2.232)),30px); /*320~768pxの間16px~20pxで可変*/;
  font-weight: 700;
  line-height: 2rem;
  margin-bottom: 3rem;
}
.sub_title::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15px;
    background: repeating-linear-gradient(-45deg, #B62536, #B62536 1px, white 2px, white 5px);
  }
.font_L{
    font-size: clamp(16px,calc(16px + ((1vw - 3.2px) * 0.892)),28px); /*320~768pxの間16px~20pxで可変*/;
    font-weight: 700;
    line-height: 2rem;
}
.font_M{
    font-size: clamp(16px,calc(16px + ((1vw - 3.2px) * 1.785)),24px); /*320~768pxの間16px~20pxで可変*/;
    line-height: 2rem;
}
.font_reds{
    font-weight: 700;
    color: #B62536;
}
.font_red{
    font-family: "madelinette-grande", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #B62536;
    font-size: 3rem;
}
.font_blue{
    font-family: "madelinette-grande", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #7FB0B7;
    font-size: 3rem;
}
.font_E{
    font-family: "madelinette-grande", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;  
}

/* 固定画像 */
.bk_img {
    width: 100%;
    /* height: 20vh; */
    position: relative;
}
.bk_img:before{
    content: "";
    position:fixed;
    top:0;
    left:0;
    z-index: -1;
    width:100%;
    height: 100vh;
    background: url(./imgs/cover_bk.jpg)no-repeat center;
    background-size:cover;
}
.bk_tx{
    position: relative;
    z-index: 1;
    padding:100px 0;
    margin: 100px 0;
    background: rgba(255, 255, 255, 0.3);
}
.bk_wh{
    background-color: #fff;
}
.bk_grs{
    background-color: #F5F5F5;
}
.bk_bj{
    background-color: #E9DACB;
}
.bk_bjs{
    background-color: #FDF7F0;
}
.bk_blue{
    background-color: #7FB0B7;
}
.con_line p{
    line-height: 1.2rem;
}
.sp_br{
    display: block; /* SPを改行する */
  }
.bd_red{
    border-top: 5px double #B62536;
    border-bottom: 5px double #B62536;
}
.bd_red_bottom{
    border-bottom: 5px double #B62536;
}
.bd_bottom{
    border-bottom: 1px dotted #212121;
    padding-bottom: 1rem;
}
.bd_left{
    border-left: 1px dotted #212121;
}
.bd_20{
    border-bottom: 1px solid #fff;
    display: block;
    width: 60%;
    padding-top: 1rem;
}
.bd_dot{
    border-bottom:1px dotted #212121;
}
.btn_contact{
    background: #7FB0B7;
    width:100%;
    border-radius: 70px;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
}
.btn_detail{
    background:#7FB0B7;
    display:block;
    border-radius:20px;
    font-size:1rem;
    color: #fff;
}
.btn_blog{
    border:  3px double #B62536;
    width:100%;
    display:block;
    padding: 1rem;
    font-size:1rem;
    color: #212121;
    margin: 1rem;
}
ul.left_foot{
    display: flex;
    flex-direction: column;
    height: 6rem;
    flex-wrap: wrap;
    /* ２段組になる */
    font-size: .8rem;
}
.sidebar_category ul{
    padding: 0;
}

/*--------------------------------------------------
ノートpc以上に対応
-----------------------------------*/

@media screen and (min-width: 768px) {/* スクリーンサイズが768px以上の場合に適用 */ 
body{
    padding-top:0px;
}
/* ヘッダー */
.menu-headernav-container{
    padding: 1.2rem;
}
#menu-headernav{
    display: flex;
    justify-content: center;
}
#menu-headernav a:hover{
    color:#B62536;
}
#menu-headernav li{
    margin: 0px 20px;
    font-size: .8rem;
}
 /* ▼サブメニューがある場合に開く処理 */ 
 #menu-headernav li:hover ul {
    display: block;     
 }
 /* ▼サブメニューの装飾 */
 #menu-headernav ul {
    display: none;       /* ★標準では非表示にする */
    position: absolute;  /* ★絶対配置にする */
    padding-left: 0;
    padding-top: .8rem;
 }
 #menu-headernav ul li {
    border-top: 1px dotted #7FB0B7; /* 項目上側の枠線 */
    margin: 0;
 }
 #menu-headernav ul li a {
    line-height: 35px;     /* サブメニュー1項目の高さ(35px) */
    text-align: left;      /* 文字列の配置(左寄せ) */
    padding-left: 5px;     /* 文字列前方の余白(5px) */
 }


/* .header_flex{
    display: flex;
    justify-content: center;   
}
header li{
    margin: 0px 20px;
    font-size: 0.8rem;
} */
.header_bg{
    background-color: #fff;
}
#menu-footernav{
    columns:3;
} 

/* トップ */
.first_v{
    background-image: url("imgs/top.jpg");
    height: 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 56.25%;
}
.logo{
    position:absolute;
    width: 20%;
    margin-top: -34%;
    left: 4%;
} 
.logo1{
    position:absolute;
    width: 13rem;
    left: 15%;
    margin: 0;
}
.box1{
    padding: 3rem;
}
.sp_br{
    display: none; /* SPの改行を隠す */
}
.sub_title{
  width: 40%;
}
.font_E{
    font-size: 3rem;  
}
.btn_contact{
    background: #7FB0B7;
    width:100%;
    border-radius: 100px;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.btn_blog{
    width: 30%;
}
.blog_flex{
    display: flex;
    justify-content: center;
}
}