@charset "UTF-8";


main{
    background-color:var(--jukenwhite);
    max-width:450px;
    margin:0 auto;
}

#popup_background{
    position:fixed;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    top:0;
    left:0;
    z-index:1000;
    display:none;
}

#popup{
    display:none;
    position:fixed;
    background-color:var(--jukenwhite);
    padding:20px;
    border:1px solid var(--jukenblack);
    width:300px;
    margin-right:calc((100% - 300px)/2);
    margin-left:calc((100% - 300px)/2);
    top:50%;
    z-index:1100;
    transform:translateY(-50%);

}

#popup p{
    font-size:17px;
    text-align:center;
    color:var(--jukenblack);
}


#popup span{
    font-size:18px;
    color:var(--jukenred);
}

#popup label{
    display:block;
    margin:0 auto;
    color:var(--jukenblack);
    text-align:center;
}

#closeBtn{
    display:block;
    color:var(--jukenblack);
    font-size:30px;
    width:30px;
    height:30px;
    line-height:30px;
    position:absolute;
    top:0px;
    right:0px;
    background-color:var(--jukenwhite);
    border:1px solid var(--jukenwhite);
}

.popup_send{
    font-size:14px;
    border:2px solid var(--jukenred);
    border-radius:20px;
    margin:0 auto;
    width:140px;
    height:35px;
    line-height:31px;
    color:var(--jukenblack);
    margin-top:5px;
    margin-bottom:5px;
    display:block;
    text-decoration:none;
    position:relative;
    padding-left:17px;
}

.popup_yajirushi1{
    width:20px;
    border-bottom:1px solid var(--jukenred);
    position:absolute;
    top:16px;
    right:17px;
}

.popup_yajirushi2{
    width:10px;
    border-bottom:1px solid var(--jukenred);
    position:absolute;
    transform:rotate(20deg);
    top:14px;
    right:17px;
}

.popup_square{
    width:20px;
    height:20px;
    background-color:var(--jukenred);
    position:absolute;
}

.popup1{
    top:0px;
    left:0px;
}

.popup2{
    top:0px;
    left:40px;
}

.popup3{
    top:20px;
    left:20px;
}

.popup4{
    top:40px;
    left:0px;
}

.popup5{
    bottom:0px;
    right:0px;
}

.popup6{
    bottom:0px;
    right:40px;
}

.popup7{
    bottom:20px;
    right:20px;
}

.popup8{
    bottom:40px;
    right:0px;
}

.top_wrapper{
    display:flex;
    flex-direction:row;
    width:100%;
}

p{
    font-family:"Noto Sans JP", serif;
    font-weight:400;
    font-style:normal;
}

label{
    font-family:"Noto Sans JP", serif;
    font-weight:400;
    font-style:normal;
}

h2{
    font-family:"Kosugi Maru", serif;
    font-weight:400;
    font-style:normal;   
}

.img_wrapper{
    position:relative;
    width:60%;
}

.other_wrapper{
    width:40%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.top_image{
    height:100%;
    width:100%;
}

.text1{
    position:absolute;
    top:calc((73/173)*100%);
    left:calc((165/375)*100%);
    background:linear-gradient(to right,#f3f0eccc,#f4e7cbcc);
    width:117px;
    height:35px;
    font-size:20px;
    text-align:center;
    line-height:35px;
    font-family:"Zen Old Mincho", serif;
    font-weight:bold;
    font-style:normal;
    color:var(--jukenblack);
}

.text1 span{
    color:var(--jukenred);
}

.text2{
    position:absolute;
    top:calc((117/173)*100%);
    left:calc((120/375)*100%);
    background:linear-gradient(to right,#f3f0eccc,#f4e7cbcc);
    width:117px;
    height:35px;
    font-size:20px;
    text-align:center;
    line-height:35px;
    font-family:"Zen Old Mincho", serif;
    font-weight:bold;
    font-style:normal;
    color:var(--jukenblack);
}

.textbox{
    text-align:center;
    font-size:13px;
    position:relative;
    font-family:'Kosugi Maru', serif;
    line-height:1.5;
}

.textbox::before{
    content:"";
    position:absolute;
    width:66px;
    border-bottom:2px solid var(--jukenred);
    top:18px;
}

.send_wrapper{
    text-align:center;
    font-size:10px;
    border:2px solid #9b2c2c4d;
    border-radius:30px;
    width:114px;
    height:30px;
    line-height:29px;
    margin-top:10px;
    position:relative;
    margin:0 auto;
    margin-top:10px;
    display:block;
    color:var(--jukenblack);
    text-decoration:none;
    font-family:"Kosugi Maru", serif;
    font-weight:400;
    font-style:normal;
}

.img_send, .img_eye{
    width:15px;
    height:15px;
    position:absolute;
    top:5px;
    left:7px;
}

.yajirushi1{
    width:6px;
    height:6px;
    border-bottom:1px solid var(--jukenred);
    transform:rotate(45deg);
    position:absolute;
    top:9px;
    right:12px;
}

.yajirushi2{
    width:6px;
    height:6px;
    border-bottom:1px solid var(--jukenred);
    transform:rotate(-45deg);
    position:absolute;
    top:9px;
    right:12px;
}

.send_wrapper span{
    color:var(--jukenred);
}

.watch_wrapper{
    text-align:center;
    font-size:10px;
    border:2px solid #9b2c2c4d;
    border-radius:30px;
    width:114px;
    height:30px;
    line-height:29px;
    margin-top:10px;
    position:relative;
    margin:0 auto;
    margin-top:10px;
    display:block;
    color:var(--jukenblack);
    text-decoration:none;
    font-family:"Kosugi Maru", serif;
    font-weight:400;
    font-style:normal;
}

.watch_wrapper span{
    color:var(--jukenred);
}

.ichimatsu_wrapper,.ichimatsu_wrapper01,.ichimatsu_wrapper02{
    display:flex;
    flex-wrap:wrap;
}

.square{
    width:calc(100%/23);
    aspect-ratio:1;
    background-color:var(--jukenwhite);
}

.red{
    background-color:var(--jukenred);
}

.yellow{
    background-color:var(--jukenyellow);
}

.title_label{
    background-color:#9b2c2c4d;
    height:40px;
    width:90%;
    margin:15px auto;
    font-size:22px;
    color:var(--jukenblack);
    line-height:40px;
    position:relative;
    padding-left:15px;
}

.title_label::before{
    content:"";
    position:absolute;
    height:40px;
    width:5px;
    background-color:var(--jukenred);
    top:0px;
    left:0px;
}

.title_label h2{
    font-size: 24px;
    color: var(--jukenblack);
    font-weight: normal;
}

/*==================================================
スライダーのためのcss
===================================*/

.slider{
    width:100%;
    display:flex;
    max-width:80%;
    margin:auto;
}

.slider li{
    height: auto;
    margin-right:10px;
    margin-left:10px;
}

.slider-image{
    width:90%;
    height:100%;
    object-fit:cover;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio:16 / 9;
    margin:0 auto;
}

.slider-inner p{
    font-size:13px;
    text-align:center;
    color:var(--jukenblack);
    padding-top:10px;
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 35%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    height: 10px;
    width: 10px;
}

.slick-prev,.slick-next{
    width:30px;
    height:30px;
    border-radius:20px;
    background-color:var(--jukenred);
    position:absolute;
}

.slick-prev{
    top:27%;
    left:-5%;
}

.slick-next{
    top:27%;
    right:-5%;
}
.slick-prev::before{
    content:"";
    position: absolute;
	z-index: 3;
    top: 29%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid var(--jukenwhite);/*矢印の色*/
    border-right: 2px solid var(--jukenwhite);/*矢印の色*/
    height: 10px;
    width: 10px;
    left:35.5%;
    transform: rotate(-135deg);
}

.slick-next::before{
    content:"";
    position: absolute;
	z-index: 3;
    top: 29%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid var(--jukenwhite);/*矢印の色*/
    border-right: 2px solid var(--jukenwhite);/*矢印の色*/
    height: 10px;
    width: 10px;
    right:35.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:5px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:var(--jukenwhite);/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:var(--jukenblack);/*ドットボタンの現在地表示の色*/
}


/*以下AZが作成*/

/*↓質問フォーム*/
#question-form {
  margin-bottom: 24px;
}
#question-form-form{
    max-width: 500px;
    margin: 0 auto;
}
#question-form .form-wrapper{
  padding: 0 5%;
}
#question-form .note {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.4;
}
#question-form-form .form-group {
  margin-bottom: 14px;
}
#question-form-form .form-group label {
  font-weight: normal;
  color: var(--jukenblack);
  font-size: 11px;
}
#question-form-form .form-group .required {
  color: #d00;
  font-size: 11px;
}
#question-form-form input[type="text"],
#question-form-form select,
#question-form-form textarea {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 12px;
  box-sizing: border-box;
}
#question-form-form textarea {
  min-height: 80px;
  resize: vertical;
}
#question-form-form .group-row{
    display: grid;
    grid-template-columns: 130px minmax(0, 350px);
    gap: 5px;
    align-items: center;  /* 縦方向の中央揃え */
    justify-items: start; /* 水平方向の左揃え */
    text-align: left;     /* テキストは左揃え */
}
#question-form-form .group-column{
    align-items: center;  /* 縦方向の中央揃え */
    justify-items: start; /* 水平方向の左揃え */
    text-align: left;     /* テキストは左揃え */
    width: 105px;
}
#question-form-form .form-grid{
    
    gap: 8px;
    align-items: center;  /* 縦方向の中央揃え */
    justify-items: start; /* 水平方向の左揃え */
    text-align: left;     /* テキストは左揃え */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#question-form-form .btn-submit {
  display: block;
  width: 40%;
  padding: 4px;
  background-color: var(--jukenred);
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 1em;
  cursor: pointer;
  margin:0 auto;
}
#question-form-form .btn-submit:hover {
  opacity: 0.9;
}



.form-line {
  display: flex;
  align-items: center;       /* 高さを中央で揃える */
  justify-content: space-between; /* labelを左、inputを右 */
}

.form-line label {
  flex: 0 0 auto; /* label幅は自動 */
}

.form-line input {
  width: 70%;
}

.select-group_wrapper {
  display: flex;
  justify-content: space-between; /* 両端に配置して均等に空きを作る */
  width: 100%; /* 親幅いっぱいに広げる */
}

.select-group_wrapper .select-group {
  display: flex;
  flex-direction: column; /* labelの下にselect */
  width: 30%; /* 固定幅（必要に応じて調整） */
}

.select-group_wrapper .select-group label {
  display: inline-block;
  width: auto;
  margin-bottom: 5px;
  font-weight: bold;
}

.select-group_wrapper .select-group select {
  padding: 4px;
}

.txtArea{
    display: block;
}

#q-question{
    width: 100%;
    margin-top: 4px;
}


.email_notice{
    margin-top: -10px;
    margin-bottom: 20px;
    font-size: 10px;
    color: var(--jukenblack);
}





/*↑質問フォーム*/


/*過去の質問*/

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  width: 300px;
  margin: 0 auto;
  margin-bottom:40px;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  background-color: #55555526;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #363c38b3;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}


/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
  background-color:#f4f5f7;
}


/*選択されているタブのコンテンツのみを表示*/
#new:checked ~ #new_content,
#done:checked ~ #done_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  border-bottom: 3px solid var(--jukenred);
  color:var(--jukenblack);
}

.tab_content_description{
    height:50px;
    width:100%;
    border-bottom:2px solid var(--jukengray);
    position:relative;
    text-decoration:none;
    display:block;
}

.question_title{
    font-size:12px;
    color:var(--jukenblack);
    padding-top:5px;
    padding-left:10px;
}

.question_user{
    font-size:9px;
}

.question_detail{
    font-size:10px;
    color:var(--jukenblack);
    padding-top:3px;
    padding-left:10px;
}

.question_img{
    width:8px;
    height:8px;
    position:absolute;
    top:7px;
    right:85px;
}

.question_date{
    font-size:8px;
    position:absolute;
    top:5px;
    right:28px;
    color:var(--jukenblack);
}

.question_time{
    font-size:8px;
    position:absolute;
    top:5px;
    right:5px;
    color:var(--jukenblack);
}

.button_question{
    font-size:15px;
    position:relative;
    text-decoration:none;
    color:var(--jukenblack);
    display:block;
    border:2px solid #9b2c2c4d;
    border-radius:30px;
    height:40px;
    line-height:35px;
    margin:0 0 0 auto;
    font-family:"Noto Sans JP", serif;
    font-weight:400;
    font-style:normal;
    width:165px;
    margin-top:10px;
    padding-left:14px;
}

.button_question::before{
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    border-bottom:1px solid var(--jukenred);
    transform:rotate(-135deg);
    top:13px;
    right:16px;
}

.button_question::after{
    content:"";
    width:10px;
    height:10px;
    border-bottom:1px solid var(--jukenred);
    transform:rotate(-45deg);
    position:absolute;
    top:13px;
    right:16px;
}

/*↑過去の質問*/

/*受験生向けSNSはこちら！*/

.jukensns_wrapper{
    background-color:var(--jukenyellow);
    padding-top:15px;
    padding-bottom:15px;
}

.contents_wrapper{
    display:flex;
    flex-direction:column;
}

.sns_title_label{
    margin:0 auto;
    background-color:var(--jukenwhite);
}

.x_title, .youtube_title{
    font-size:17px;
    text-align:center;
    color:var(--jukenblack);
    margin-top:10px;
}

.title_decoration{
    width:40px;
    border-bottom:3px solid var(--jukenred);
    margin:0 auto;
    display:block;
}

.twitter-timeline{
    margin:0 auto;
}

/*↑受験生向けSNSはこちら！*/

/*タブレット版*/
/*@media screen and(min-width:768px){
    .text1{
        top:calc((220/554)*100%);
        left:calc((520/768)*100%);
        width:160px;
        height:40px;
        font-size:28px;
        line-height:40px;
    }

    .text2{
        top:calc((330/554)*100%);
        left:calc((460/768)*100%);
        width:160px;
        height:40px;
        font-size:28px;
        line-height:40px;
    }

    .textbox{
        font-size:22px;
    }

    .textbox::before{
        width:112px;
        border-bottom:3px solid var(--jukenred);
    }

    .send_wrapper{
        font-size:20px;
        width:200px;
        height:40px;
        line-height:35px;
    }

    .img_send, .img_eye{
        width:25px;
        height:25px;
        top:5px;
        left:7px;
    }

    .yajirushi1{
        width:20px;
        height:20px;
        top:5px;
        right:5px;
    }

    .yajirushi2{
        width:20px;
        height:20px;
        top:5px;
        right:5px;
    }

    .watch_wrapper{
        font-size:20px;
        width:200px;
        height:40px;
        line-height:35px;
    }
}*/

/*PC版*/
/*@media screen and (min-width:1024px){
    .top_image{
        max-width:500px;
    }
    .text1{
        width:300px;
        height:65px;
        font-size:50px;
        line-height:60px;
        top:calc((220 / 554) * 100%);
    }

    .text2{
        width:300px;
        height:65px;
        font-size:50px;
        line-height:60px;
        top:calc((330 / 554) * 100%);
    }

    .textbox{
        font-size:36px;
    }

    .textbox::before{
        width:185px;
        border-bottom:5px solid var(--jukenred);
        top:45px;
    }

    .send_wrapper{
        font-size:23px;
        width:270px;
        height:60px;
        line-height:54px;
    }

    .yajirushi1, .yajirushi2{
        width:20px;
        height:20px;
        top:12px;
        right:25px;
    }

    .watch_wrapper{
        font-size:23px;
        width:270px;
        height:60px;
        line-height:54px;
    }

    .img_send, .img_eye{
        width:35px;
        height:35px;
        position:absolute;
        top:10px;
        left:18px;
    }

    .square{
        width:calc(100%/31);
    }

    .title_label{
        height:60px;
        line-height:60px;
    }

    .title_label::before{
        height:60px;
        width:10px;
    }

    .title_label h2{
        font-size:41px;
        padding-left:10px;
    }

    .slider-image{
        width:50%;
    }

    .slider-inner p{
        font-size:22px;
    }

    .slick-prev,.slick-next{
        width:50px;
        height:50px;
        border-radius:35px;
    }

    .slick-next{
        right:15%;
    }

    .slick-next::before,.slick-prev::before{
        height:20px;
        width:20px;
    }

    .slick-prev{
        left:15%;
    }

    .contents_wrapper{
        flex-direction:row;
    }

    .x_wrapper, .youtube_wrapper{
        width:50%;
    }

    .x_title, .youtube_title{
        font-size:28px;
    }

    .title_decoration{
        width:70px;
    }

    .tabs{
        width:50%;
    }

    .tab_item:hover {
        opacity: 0.75;
    }

    .tab_content_description{
        height:70px;
    }

    .question_title{
        font-size:18px;
    }

    .question_user{
        font-size:15px;
    }

    .question_detail{
        font-size:16px;
    }

    .question_img{
        width:15px;
        height:15px;
        top:8px;
        right:140px;
    }

    .question_date{
        font-size:14px;
        right:42px;
    }

    .question_time{
        font-size:14px;
    }

    .button_question{
        font-size:22px;
    }

    .button_question::before{
        width:170px;
        top:40px;
    }

    .button_question::after{
        top:34.9px;
    }
}

@media screen and (min-width:1440px){
    .top_image{
        max-width:700px;
    }

    .image_wrapper{
        width:55%;
    }

}*/