@charset "shift_jis";

/* body.css */
/*
	2025 new design ver.1.0
	レスポンシブ
*/

section {
    margin: 0 auto 60px;
}
section > p{
    font-size: 16px;
    color: #fff;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto 30px;
    text-align: left;
}
.list_chushaku{
    font-size: 12px;
    text-align: left;
    list-style: circle;
    padding-inline-start: 0;
    unicode-bidi: inherit;
    width: calc(100%-15px);
    margin-left: 15px;
    padding:15px 0 0 0;
}
.list_chushaku li{
    list-style: circle;
}


.font_red {
    color: #E50012;
}

.font02_red_bold {
    color: #E50012;
    font-weight: 900;
}

.font02_green_bold {
    color: #00A700;
    font-weight: 900;
}

.font_blue_bold {
    color: #0B79C4;
    font-weight: 600;
}
/* --------------------------------------------------
top_read
-------------------------------------------------- */
.top_read{
    padding: 40px 0 0 0;
}
.top_read > p{
    max-width: 1024px;
    margin: 0 auto 20px;
}
.top_read ul.top_txt_inner {
    width: 90%;
    max-width: 1024px;   
    background-color: #ffffff;
    padding: 15px;
    margin: 0 auto;
    text-align: left;
}





/* --------------------------------------------------
.cmnlayout　共通の白背景　角あり
-------------------------------------------------- */
.cmnlayout{
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 15px;
    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: space-between;
     flex-direction: column; /*縦並び; */
    /* flex-direction: row;  横並び */
    align-items: center;
    justify-content: space-between;

}
.cmnlayout p{
    font-size: 16px;
    text-align: left;
}

/* --------------------------------------------------
merit
-------------------------------------------------- */
.merit .meritcontainer > div{
    width: 90%;
    margin: 0 auto 10px;
    max-width: 960px;
    padding: 20px 10px;
    border-radius: 10px;     
    background-color: rgb(255, 255, 255);
    align-items: center;
    justify-content: space-between;
}

.merit h4 {
    color: #0B79C4;
    font-size: clamp(18px,3vw,22px);
    text-align: center;
    padding: 0;
    font-family: "RoundedMgenplus-medium", sans-serif;
    margin: 0 auto 20px;
}
.merit .LR_container {

    width: 100%;
}
.merit .LR_container p{
    text-align: left;
    font-size: 14px;
    line-height: 1.6em;
}
.merit .LR_container .R img {
    max-width: 200px;

}
.merit .bottom {
    width: 100%;
    align-items: center;
    background-color: #0B79C4;
    padding: 5px 0;
    margin: 2% 0 2% 0;
    color: #ffff;
    font-size:clamp(1.25rem, 1.107rem + 0.71vw, 1.375rem); /* size 24px-26px 320px-600px */
    font-weight: 500;
}


/* --------------------------------------------------
flow
-------------------------------------------------- */
.flow .cmnlayout img{
    width: 100%;
}
.yblayout{
    width: 90%;
    max-width: 560px;
    margin: auto;
    padding: 20px 0 0 0;
}
.youtube{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.youtube iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------
mypage
-------------------------------------------------- */
.mypage img{
    width: 100%;
}

/* --------------------------------------------------
first
-------------------------------------------------- */
.first .cmnlayout{
    margin: 0 auto 20px;
}
.first .cmnlayout h4 {
    color: #0B79C4;
    font-size: clamp(2.063rem, 2rem + 0.33vw, 2.188rem);
    text-align: center;
    padding: 0;
    font-family: "RoundedMgenplus-medium", sans-serif;
    margin: 0 auto 20px;
}
.first .cmnlayout img{
    width: 90%;
    max-width: 600px;
    margin:0 auto 20px;
}
.first .cmnlayout p{
    text-align: left;
    margin-bottom: 20px;
}


/* --------------------------------------------------
fumei
-------------------------------------------------- */
.fumei .cmnlayout{
    box-sizing: border-box;
    
}
.fumei p{
    text-align: left;
    margin-bottom: 30px;
}
.fumei ul li{
    border-bottom: 1px solid #ccc;
    padding: 15px;
}
.fumei ul li:nth-last-child(1){
    border-bottom: none;
}



/* --------------------------------------------------
TOP_block_btn
-------------------------------------------------- */

a.TOP_btn {
    margin: 0 auto;
    display: flex;
    align-items: center;     /* 縦方向の中央揃え */
    justify-content: space-between; /* 左右に余白をつけて中央に配置 */
    text-decoration: none;
    color: #170D00;
    font-size: clamp(2.125rem, 2.069rem + 0.1vw, 2.188rem); /* 34px-35px 900px-1900px */
    border-radius: 10px;
    width: 100%;
    max-width: 458px;
     height: 75px; /*OR83pxOR83px */
    font-weight: 500;
    border: 1px solid #f4c030;
    transition: 0.3s;
    padding: 0 15px;
          background-image: linear-gradient(0deg, #FFF700 13%, #ffd539c9 92% 93%);
	font-family: '源柔ゴシックL','GenJyuuGothicL','GenJyuuGothicLP','GenJyuuGothicLMonospace',"RoundedMgenplus-medium", "sans-serif",'Source Han Sans', Meiryo, メイリオ, Osaka,arial, helvetica, sans-serif;
}

/* ボタン内のテキストを左寄せ */
.TOP_btn span {
    display: inline-block;
    text-align: center;  /* 中央寄せにする */
    flex-grow: 1;  /* 幅全体を使わせる */
        width: 100%;
}
.TOP_btn::after {
    content: ">"; 
    padding-left: 5px; 
    text-align: right; 
}
.TOP_btn a:hover {
  opacity: 0.6;
          color: #170D00;
  text-decoration:none;
}



/* --------------------------------------------------
-----------------------------------------------------
window size 900-
-----------------------------------------------------
-------------------------------------------------- */
@media screen and (min-width:900px){
    section > p{
        width: 100%;       
    }
    /* --------------------------------------------------
    top_read
    -------------------------------------------------- */
    ul.top_txt_inner {
        font-size: 14px;
        text-align: left;
        width: 100%;
    }
    .top_read ul.top_txt_inner {
        width: 100%;
    }

    /* --------------------------------------------------
    .cmnlayout　共通の白背景　角あり
    -------------------------------------------------- */
    .cmnlayout{
        width: 100%;
    }
    
    /* --------------------------------------------------
    merit
    -------------------------------------------------- */
    .merit .meritcontainer{
        display: flex;
        flex-wrap: wrap;
        max-width: 1024px;
        margin: 0 auto 40px;
    }
    .merit .meritcontainer > div{
        width: 48%;
        margin-bottom: 20px;
    }

    .merit .meritcontainer .LR_container {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        width: 100%;
    }
    .merit .meritcontainer .LR_container .L{
        width: 60%;
    }
    .merit .meritcontainer .LR_container .R{
        width: 40%;
    }
    .merit .meritcontainer .LR_container .R img{
        width: 100%;
    }


    /* --------------------------------------------------
    .flow
    -------------------------------------------------- */

    .flow .cmnlayout {
        width: 100%;
        margin: 0% 0% 2% 0%;

        display: flex;
        background-color: rgb(255, 255, 255);
        justify-content: space-between;
        flex-direction: row; /*  横並び */
        align-items: center;
        justify-content: space-between;
    }
    .flow ul.L {
        width: 40%;
    }
    .flow ul.R {
        width: 60%;
        margin: auto;
    }
    .flow ul.R p{
        width: 90%;
        margin: 0 auto 30px;
    }

    /* --------------------------------------------------
    .mypage
    -------------------------------------------------- */
    .mypage .cmnlayout {
        width: 100%;
        margin: 0% 0% 2% 0%;

        display: flex;
        background-color: rgb(255, 255, 255);
        justify-content: space-between;
        flex-direction: row; /*  横並び */
        align-items: center;
        justify-content: space-between;
    }
    .mypage ul.L {
        width: 60%;
    }
    .mypage ul.R {
        width: 40%;
        margin: auto;
    }
    .mypage ul.R p{
        width: 90%;
        margin: 0 auto 30px;
    }



}


/* EOF */