/* PC、スマホ共通スタイル */

    /* フォント */
    body {
        font-family: "Source Sans Pro", "Hiragino Kaku Gothic ProN", "Hiragino Mincho Pro", Meiryo, Arial, 'Anton', sans-serif;
    }
    p {
        font-size: 15px;
    }

/*===========
 PC用のスタイル
===========*/
    /* 横幅設定 */
    
    /*  body に
        max-width: 1080px;
        min-width: 960px;
        を入れると、左右に余白ができる
    */
    html {
        height: 100vh;
    }
    body {
        margin: auto;
    }

    /* ヘッダー */
    header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        background-image:url("../image/navback.749bc18a8e2e.png") ;
        
    }
        /* ロゴの大きさ調整 */
        #logo img {
            width: 250px;
        }
        /* ハンバーガーメニュー（start以外） */
        .menu-btn {
            position: fixed; /* これを消せば右上に固定できる */
            top: 10px;
            right: 10px;
            display: flex;
            height: 60px;
            width: 60px;
            justify-content: center;
            align-items: center;
            z-index: 90;
            background-color: black;
        }
        .menu-btn span,
        .menu-btn span:before,
        .menu-btn span:after {
            content: '';
            display: block;
            height: 3px;
            width: 25px;
            border-radius: 3px;
            background-color: #ffffff;
            position: absolute;
        }
        .menu-btn span:before {
            bottom: 8px;
        }
        .menu-btn span:after {
            top: 8px;
        }
        #menu-btn-check:checked ~ .menu-btn span {
            background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
        }
        #menu-btn-check:checked ~ .menu-btn span::before {
            bottom: 0;
            transform: rotate(45deg);
        }
        #menu-btn-check:checked ~ .menu-btn span::after {
            top: 0;
            transform: rotate(-45deg);
        }
        #menu-btn-check {
            display: none;
        }
        #menu-btn-check:checked ~ .menu-content {
            left: 0;/*メニューを画面内へ*/
        }
        /* ハンバーガーメニュー（start） */
        .menu-btn-start {
            position: fixed; /* これを消せば右上に固定できる */
            top: 10px;
            right: 10px;
            display: flex;
            height: 60px;
            width: 60px;
            justify-content: center;
            align-items: center;
            z-index: 90;
            background-color: black;
        }
        .menu-btn-start span,
        .menu-btn-start span:before,
        .menu-btn-start span:after {
            content: '';
            display: block;
            height: 3px;
            width: 25px;
            border-radius: 3px;
            background-color: rgb(203, 27, 69);
            position: absolute;
        }
        .menu-btn-start span:before {
            bottom: 8px;
        }
        .menu-btn-start span:after {
            top: 8px;
        }
        #menu-btn-check:checked ~ .menu-btn-start span {
            background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
        }
        #menu-btn-check:checked ~ .menu-btn-start span::before {
            bottom: 0;
            transform: rotate(45deg);
        }
        #menu-btn-check:checked ~ .menu-btn-start span::after {
            top: 0;
            transform: rotate(-45deg);
        }
        #menu-btn-check {
            display: none;
        }
        #menu-btn-check:checked ~ .menu-content {
            left: 0;/*メニューを画面内へ*/
        }
        /* ハンバーガーメニューを押した後*/
        .menu-content {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 100%; /*leftの値を変更してメニューを画面外へ*/
            z-index: 80;
            background-color: black;
            transition: all 0.5s;
            font-family: "Hiragino Mincho Pro";
        }
        .menu-content ul {
            padding: 70px 10px 0;
        }
        .menu-content ul li {
            border-bottom: solid 1px #ffffff;
            list-style: none;
        }
        .menu-content ul li a {
            display: block;
            width: 100%;
            font-size: 35px;
            box-sizing: border-box;
            color:#ffffff;
            text-decoration: none;
            padding: 10px 15px 10px 0;
            position: relative;
        }
        .menu-content ul li a::before {
            content: "";
            width: 10px;
            height: 10px;
            /* border-top: solid 2px #ffffff;
            border-right: solid 2px #ffffff; */
            transform: rotate(45deg);
            position: absolute;
            right: 10px;
            top: 15px;
        }
        /* ハンバーガーメニュー導入前のナビゲーションのレイアウト 
        #nav-pc {
            font-size: 15px;
            padding-top: 35px;
            margin-left: auto;
        }
        #nav-pc > a {
            margin-right: 20px;
            margin-left: auto;
            text-decoration: none;
            color: white;
        }
        #nav-pc > #except-leave:hover {
            color: rgb(203, 27, 69);
        }
        */
        /*    
        #nav-pc > #leave:hover {
            color: rgb(255, 255, 100);
        }
        #nav-pc > #subscribe:hover {
            color: rgb(170, 255, 215);
        }
        */

    /* メインビジュアル */

        #before-register-main > iframe {
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
        }

        #before-register-main > table {
            width: 100%;
        }

        #before-register-main > table td {
            padding: 10px 20px;
            font-size: 20px;
            text-align: center;
        }
        #introduction {
            padding: 5px 0 0 0;
        }

        #indexintroduction {
            width: 100%;
        }

        #index_button {
            width: 100%;
            margin: 5px 0 5px 0;
            border: none;
            background-color: white;
            color: black;
            font-size: 45px;
        }

        #index_button:hover {
            background-color: black;
            color: white;
            transition: 250ms;
        }


        #itemA {
            grid-column: 1 / 3;
        }

        #itemB {
            grid-column: 2 / 3;
        }

        #itemC {
            grid-column: 3 / 3;
        }

        #reg {
            font-size: 20px;
            width: 100%;
            padding: 0 90px;
        }

        #reg > input {
            margin: 10px;
            padding: 20px;
            font-size: 20px;
        }

        .input_box {
            background: transparent;
            text-align: 20px;
            width: 250px;
            padding: 20px;
            border:none;
            border-radius:4px 4px 4px 4px;
            box-shadow: 1px 1px 4px rgb(71, 71, 71) inset;
        }

        .input_box::placeholder {
            font-size: 15px;
        }

        .input_box:focus {
            background: black;
            color: white;
            transition: 250ms;
        }

        .input_box_address {
            background: transparent;
            text-align: 20px;
            width: 546px;
            padding: 20px;
            border:none;
            border-radius:4px 4px 4px 4px;
            box-shadow: 1px 1px 4px rgb(71, 71, 71) inset;
        }
        
        .input_box_address::placeholder {
            font-size: 15px;
        }

        .input_box_address:focus {
            background: black;
            color: white;
            transition: 250ms;
        }
        
        .register_enter {
            font-size: 20px;
            text-align: center;
            padding    : 20px;  
            margin: 10px 10px 10px 185px;
            background    : white;    
            color         : black;    
            border-color: rgb(150, 150, 150);
            border-radius: 5%;
        }

        .register_enter:hover {
            background: black;
            color: rgb(203, 27, 69);
            transition: 250ms;
          }

        h1 {
            padding: 0 0 0 25px;
            font-family: "Hiragino Mincho Pro";
        }

        h2 {
            text-align: center;
            font-family: "Hiragino Mincho Pro";
            background-color: rgb(203, 27, 69);
            color: white;
            padding: 15px;
        }

        h3 {
            padding: 0 0 0 25px;
        }

        .box-img,
        .box-text {
            display: inline;
        }

        p {
            display: inline-block;
            vertical-align: top;
            font-size: 20px;
            padding: 0 25px;
        }

        #intro-4skills {
            width: 80%;
            display: block;
            margin: auto;
            padding: 20px 0 20px 0;
        }

        #efepi_2025 {
            width: 70%;
            display: block;
            margin: auto;
           
        }

        #efepi_table {
            text-align: left;
            vertical-align: top;
            padding: 10px 25px;
            font-size: 20px;
        }

        #killerword_e {
            font-weight: bold;
        }

        #talis_2018 {
            width: 95%;
            display: block;
            margin: auto;
            padding: 20px 25px 20px 0;
        }

        #piaac_2013_2024 {
            width: 100%;
            display: block;
            margin: auto;
        }
           

        #reference {
            font-size: small;
        }

        #intro_logo {
            display: inline-block;
            width: 250px;
        }

        .intro_h3 > h3 {
            background-color: rgb(203, 27, 69);
            font-family: "Hiragino Mincho Pro";
            color: white;
            font-size: 20px;
            font-weight: 100;
            padding: 0 25px;
        }
        #tuition_h3 {
            background-color: rgb(203, 27, 69);
            font-family: "Hiragino Mincho Pro";
            color: white;
            padding: 10px 25px;
        }
        #tuition_table {
            text-align: left;
            vertical-align: top;
            padding: 10px 25px;
            font-size: 20px;
            
        }
        .field > h3 {
            font-size: 30px;
            font-weight: 100;
        }

        .field > table {
            width: 100%;
            text-align: left;
        }

        button {
            background-color: transparent;
            font-size: 30px;
            text-align: center;
            padding       : 20px;  
            margin: 10px;
            background    : black;    
            color         : white; 
        }

        button:hover {
            background    : white;    
            color         : black;    
            border-color:  black;    
            transition: 250ms;
        }

        .answer-and-review > h3 {
            font-size: 30px;
            font-weight: 100;
        }

        .answer-and-review > button {
            background-color: transparent;
            font-size: 15px;
            border-radius: 5%;
            text-align: center;
            padding       : 10px;  
            margin: 20px;
            background    : black;    
            color         : white; 
        }

        .answer-and-review > button:hover {
            background    : white;    
            color         : black;    
            border-color:  black;    
            transition: 250ms;
        }

        .alldone {
            text-decoration: none;
            font-size: 20px;
            color: black;
            text-align: center;
        }

        .alldone > a:hover{
            text-decoration: none;
            font-size: 20px;
            color: black;
            text-align: center;
        }

        #main4 > table {
            width: 100%;
        }
        #main4 > table th > a > button {
            background-color: transparent;
            width: 150px;
            font-size: 50px;
            border-radius: 5%;
            text-align: center;
            padding       : 10px;  
            margin: 20px;
            background    : black;    
            color         : white; 
        }

        #main4 > table th > a > button:hover {
            background    : white;    
            color         : black;    
            border-color:  black;    
            transition: 250ms;
        }
        #fourchoiceslist {
            width: 100%;
            padding: 40px;
        }

        #listbutton {
            width: 75px;
            height: 75px;
            margin: 10px;
            padding: 20px;
            font-size: 15px;
            text-align: center;
            background    : white;    
            color         : black;    
            border-color:  black;    
        }
        #listbutton:hover{
            background    : black;    
            color         : white;    
            border-color:  black;    
            transition: 250ms;
        }

        #error > ul,li {
            list-style: none;
            font-size: 20px;
            color: black;
        }

        #killerword_c {
            font-size: 45px;
        }

        #killerword_i {
            font-size: 35px;
        }

        #policy_p {
            font-weight: bold;
        }

        #policy_h3 {
            background-color: rgb(203, 27, 69);
            font-family: "Hiragino Mincho Pro";
            color: white;
            padding: 10px 25px;
        }

        #h2_c {
            text-align: center;
            background-color: rgb(203, 27, 69);
            font-family: "Hiragino Mincho Pro";
            color: white;
            padding: 15px;
        }

        #h2_s {
            text-align: center;
            background-color: rgb(203, 27, 69);
            font-family: "Hiragino Mincho Pro";
            color: white;
            padding: 15px;
        }

        #faq_q {
            color: rgb(203, 27, 69);
        }

        #faq_bold {
            font-weight: bold;
        }

        #faq_link {
            text-decoration: none;
            color: black;
        }

        #faq_link:hover {
            color: rgb(203, 27, 69);
        }
        /* start.html */

        /*　アコーディオンパネル　*/
        section.typeA{
	        display: flex;
	        flex-wrap: wrap;
        }
        section.typeA::after {
	        content: '';
	        width: 100%;
	        height: 3px;
	        order: -1;
	        display: block;
	        background: rgba(203, 27, 69);
        }
        section.typeA .tabLabel {	/* タブ */
	        margin-right: 3px;
	        text-align: center;
            font-family: "Hiragino Mincho Pro";
	        flex: 1;
	        order: -1;
	        border-radius: 3px 3px 0 0;
	        color: rgba(203, 27, 69);
	        background: white;
	        transition: .5s ;
	        cursor: pointer;
            font-size: 25px;
        }
        section.typeA .tabLabel:nth-last-of-type(1){ margin-right: 0; }
        section.typeA input {		/* ラジオボタン非表示 */
	        display: none;
        }
        section.typeA .content {	/* vimeoリンク */
            text-align: center;
	        width: 100%;
	        height: 0;
	        overflow: hidden;
	        opacity: 0;
        }
        section.typeA .content img {	
	        width: 20%;
        }
        /*アクティブ設定*/
        section.typeA input:checked + .tabLabel {
	        color: #fff;
	        background: rgba(203, 27, 69);
        }
        section.typeA input:checked + .tabLabel + .content {
	        padding: 15px;
	        height: auto;
	        overflow: auto;
	        transition: .5s opacity;
	        opacity: 1;
        }

        /*　アコーディオンパネル（読解内）　*/
        section.typeB {
	        display: flex;
	        flex-wrap: wrap;
        }
        section.typeB::after {
	        content: '';
	        width: 100%;
	        height: 3px;
	        order: -1;
	        display: block;
	        background: rgba(203, 27, 69);
        }
        section.typeB .tabLabel {	/* タブ */
	        margin-right: 3px;
	        text-align: center;
            font-family: "Hiragino Mincho Pro";
	        flex: 1;
	        order: -1;
	        border-radius: 3px 3px 0 0;
	        color: rgba(203, 27, 69);
	        background: white;
	        transition: .5s ;
	        cursor: pointer;
            font-size: 25px;
        }
        section.typeB .tabLabel:nth-last-of-type(1){ margin-right: 0; }
        section.typeB input {		/* ラジオボタン非表示 */
	        display: none;
        }
        section.typeB .content {	/* vimeoリンク */
            text-align: center;
	        width: 100%;
	        height: 0;
	        overflow: hidden;
	        opacity: 0;
        }
        section.typeB .content img {	
	        width: 20%;
        }
        /*アクティブ設定*/
        section.typeB input:checked + .tabLabel {
	        color: #fff;
	        background: rgba(203, 27, 69);
        }
        section.typeB input:checked + .tabLabel + .content {
	        padding: 15px;
	        height: auto;
	        overflow: auto;
	        transition: .5s opacity;
	        opacity: 1;
        }
       
        #thumbnail {
            text-align: center;
        }

        #thumbnail img{
            width: 25%;
        }

        #thumbnail > a {
            padding: 15px;
            
        }
        #recommendedbooks_h3 {
            background-color: rgb(203, 27, 69);
            font-family: "Hiragino Mincho Pro";
            color: white;
            padding: 10px 25px;
        }
        #recommendedbooks_link {
            text-decoration: none;
            color: black;
            font-size: large;
            padding: 10px 25px;
        }
        #recommendedbooks_link:hover {
            color: rgb(203, 27, 69);
            font-size: large;
            padding: 10px 25px;
        }
    
        /* animation.html */
        
        #animation_body {
            margin: auto;
            animation-name: animation_a;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-fill-mode:forwards;
            opacity:0;
            background-color: black;
        }
        
        .animation_a > img {
            width: 50%;
            margin: 25%;
            
        }

        @keyframes animation_a{
            from {
                    opacity: 0;
                }
    
            to {
                    opacity: 2;
                }
        }
        
    /* フッター */
    footer {
        background-color: black;
        text-align: center;
        padding: 15px 80px 15px 80px;
        }

        #footer-logo > img {
            width: 350px;
        }

        #sns-footer {
            text-align: left;
            width: 100%;
        }

        #sns-footer > a {
            margin-right: 30px;
        }

        #sns-footer > a > img {
            width: 30px;
            padding-top: 5px;
        }


        #copyright {
            color: #ffffff;
            padding-top: 10px;
            float: right;
        }