@charset "utf-8";

        .pc{display: block;} .sp{display: none;}
		#content4, #content4 .title {background: none;}
		#content4 .title p.webinar_about{border: #ffffff solid 1px; padding: 20px; max-width: 900px; width: 100%; text-align: left; margin: 10px auto 50px auto; font-size: 16px;}
		#content4 .movie_block{width:90%; margin: 30px auto; padding-bottom: 30px; text-align: center;}
		#content4 .movie_block .mv_vol{display: inline-block; padding: 0 20px 50px 20px;}
		#content4 .movie_block .mv_vol h3{max-width: 500px; font-size: 16px; padding: 20px 0; text-align: left; line-height: 25px;}
		#content4 .movie_block .mv_vol iframe{border: #333 solid 1px;}

        section{
            padding: 60px 0;
        }
        section h2, section h3, section h4, section h5{
            font-family: 'Nanum Myeongjo', serif;
            font-size: 60px;
            width: 100%;
            text-align: center;
            letter-spacing: 0.1em;
        }
        section h3{font-size: 50px;}
        section p{
            font-family: 'Nanum Myeongjo', serif;
            font-size: 18px;
            text-align: center;
            padding: 20px 0;
        }
        section p.lead{font-size: 24px; padding: 50px 0;}

        section.nav{
            background: #ccc;
            padding: 20px 0;
            margin: 0 0 50px 0;
        }
        section.nav ul, section div.founder_block, section div.stories_block, section div.students_block,
        section p.about_lead, section .about_lnk, section .students_block, .tsh_block{
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        section.nav ul li{
            display: inline-block;
            padding: 0 30px;
        }

		section.nav ul li a {color: #111;}
		section.nav ul li a:hover {text-decoration: none;}
        section div.founder_block{
            text-align: left;
            margin: 30px auto;
        }

        section div.founder_block .founder_prof, section div.founder_block .founder_lead{
            display: inline-block;
            vertical-align: top;
        }
        section div.founder_block .founder_prof, section div.founder_block .founder_prof img{
            width: 280px;
        }
        section div.founder_block .founder_prof p{
            font-size: 14px;
        }
        section div.founder_block .founder_prof p span{
            font-size: 16px;
            font-weight: bold;
        }
        section div.founder_block .founder_lead{
            width: 850px;
            padding: 0 0 0 50px;
        }
        section div.founder_block .founder_lead h4{
            text-align: left;
            font-size: 30px;
            font-family: 'Nanum Myeongjo', serif;
        }
        section div.founder_block .founder_lead p{
            text-align: left;
            line-height: 200%;
        }

        section .about_lnk{
            width: 300px;
            padding: 30px 0 0 0;
        }

        section div.stories_block div, section div.students_block div{
            display: inline-block;
            width: 360px;
            vertical-align: top;
        }
        section div.students_block div.student_last{
            display: block;
            margin: 0 auto;
        }
        section div.stories_block div img{
            width: 360px;
        }
        section div.students_block div img{
            width: 280px;
            padding: 50px 0 0 0;
        }
        section div.stories_block div:nth-child(2), section div.students_block div:nth-child(2){
            padding: 0 20px;
        }
        section div.stories_block div h4, section div.stories_block div h5{
            font-size: 24px;
            padding: 30px 0 10px 0;
        }
        section div.stories_block div p{
            line-height: 160%;
            text-align: left;
        }
        section div.students_block div p:nth-child(2){
            line-height: 160%;
            font-weight: bold;
            padding: 20px 0 0 0;
        }
        section div.students_block div p:nth-child(2) span{
            font-size: 24px;
        }
        section div.students_block div p:nth-child(3){
            line-height: 160%;
            font-size: 12px;
            padding: 0 0 20px 0;
        }
        section div.students_block div .button{
            width: 200px;
        }

        #sake_modal, #sake_modal01, #sake_modal02, #sake_modal03, #sake_modal04, #sake_modal05, #sake_modal06 {
            max-width: 1200px;
            padding: 84px 100px;
        }
        #sake_modal h3, #sake_modal01 h3, #sake_modal02 h3, #sake_modal03 h3, #sake_modal04 h3, #sake_modal05 h3, #sake_modal06 h3 {
            margin: 0px 0 0 0;
            padding: 0;
            max-width: 800px;
            letter-spacing: 0.12em;
            font-size: 40px;
        }
        #sake_modal h4, #sake_modal01 h4, #sake_modal02 h4, #sake_modal03 h4, #sake_modal04 h4, #sake_modal05 h4, #sake_modal06 h4 {
            font-size: 18px;
            font-weight: 200;
            line-height: 180%;
            margin: 20px 0 0 0;
        }
        #sake_modal h4 span, #sake_modal01 h4 span, #sake_modal02 h4 span, #sake_modal03 h4 span, #sake_modal04 h4 span, #sake_modal05 h4 span, #sake_modal06 h4 span{
            font-size: 30px;
            font-weight: 100;
        }
        #sake_modal04 h4 {
            display: inline-block;
            margin: 0 50px 10px 0;
        }
        #sake_modal p, #sake_modal01 p, #sake_modal02 p, #sake_modal03 p, #sake_modal04 p, #sake_modal05 p, #sake_modal06 p{
            font-weight: 100;
            font-size: 16px;
        }
        #sake_modal p span{
            font-size: 21px;
        }
        #sake_modal .button {
            width: 300px;
        }

        .button {
            display: inline-block;
            width: 100%;
            height: 50px;
            font-size: 14px;
            text-align: center;
            text-decoration: none;
            line-height: 200%;
            outline: none;
            background-color: #d44e15;
            color: #fff;
            border-radius: 5px;
            padding: 10px 0;
        }
        .button::before,
        .button::after {
        position: absolute;
        z-index: -1;
        display: block;
        content: '';
        }
        .button,
        .button::before,
        .button::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all .3s;
        transition: all .3s;
        }
        .button:hover {
        background-color: #242349;
        color: #fff;
		text-decoration: none;
        }

		@media all and (max-width: 1200px) {
	        section.nav ul,
			section div.founder_block,
			section div.stories_block,
			section div.students_block,
	        section p.about_lead,
			section .about_lnk,
			section .students_block,
			.tsh_block{width: 100%;}

			section div.founder_block .founder_prof,
			section div.founder_block .founder_prof img{width: calc(var(--vw) * 23.33);}
			section div.founder_block .founder_lead{
				width: calc(var(--vw) * 70.83);
				padding: 0 0 0 calc(var(--vw) * 4.17);
			}

			section .about_lnk{width: calc(var(--vw) * 25);}
			section div.stories_block div,
			section div.students_block div{width: calc(var(--vw) * 30);}
			section div.students_block div .button{width: calc(var(--vw) * 16.67);}
			section div.stories_block div img{width: calc(var(--vw) * 30);}
			section div.students_block div img{width: calc(var(--vw) * 23.33);}
		}

		@media all and (max-width: 560px) {
            .pc{display: none;} .sp{display: block;}
            section {
                padding: 60px 0 0 0;
            }
            section h2, section h3, section h4, section h5 {
                font-size: 40px;
            }
            section p.lead {
                font-size: 16px;
                line-height: 200%;
                padding: 50px 0;
            }
            section.nav ul, section div.founder_block, section div.stories_block, section div.students_block, section p.about_lead, section .about_lnk, section .students_block, .tsh_block {
                width: 100%;
            }
            section.nav ul li {
                padding: 0 10px;
                font-size: 14px;
                line-height: 200%;
            }
            section div.founder_block .founder_prof, section div.founder_block .founder_prof img {
                width: 280px;
                margin: 0 auto;
                display: block;
            }
            section div.founder_block .founder_prof img {
                width: 140px;
            }
            section div.founder_block .founder_lead {
                width: 85%;
                padding: 0 0 0 0;
                margin: 50px auto;
                display: block;
            }
            section div.founder_block .founder_lead p{
                font-size: 16px;
                line-height: 200%;
            }
            section div.stories_block div:nth-child(2), section div.students_block div:nth-child(2) {
                padding: 0 0 0 0;
            }
            section div.stories_block div, section div.students_block div{
                width: 100%;
                margin: 0 0 30px 0;
            }

			section div.stories_block div img{width: 360px;}
            section p.about_lead, section div.stories_block div p{
                width: 85%;
                text-align: left;
                font-size: 16px;
                margin: 0 auto;
            }
            section div.students_block div img {
                width: 140px;
                padding: 20px 0 0 0;
            }

			section div.students_block div .button{width: 200px;}

            #sake_modal, #sake_modal01, #sake_modal02, #sake_modal03, #sake_modal04, #sake_modal05, #sake_modal06 {
                max-width: 100%;
                padding: 20px;
            }
            .mfp-close-btn-in .mfp-close {
                padding: 0 0 0 0;
                height: 40px;
            }
            .mfp-close-btn-in .mfp-close img {
                width: 40px;
                height: 40px;
                pointer-events: none;
            }
            #sake_modal h3, #sake_modal01 h3, #sake_modal02 h3, #sake_modal03 h3, #sake_modal04 h3, #sake_modal05 h3, #sake_modal06 h3 {
                margin: 0px 0 0 0;
                padding: 0;
                max-width: 100%;
                letter-spacing: 0;
                font-size: 24px;
            }
            #sake_modal04 h4 {
                font-size: 14px;
                line-height: 120%;
                margin: 20px 30px 10px 0;
            }
            #sake_modal04 h4 span{
                font-size: 16px;
            }
            section h3.ttl_sp_left, section h3.ttl_sp_left{
                text-align: left;
                width: 85%;
                margin: 0 auto;
            }
            section div.stories_block div h4, section div.stories_block div h5 {
                text-align: left;
                font-size: 24px;
                padding: 30px 0 10px 0;
                margin: 0 auto;
                width: 85%;
            }


			#content4 .title h2 {margin: 0 0 0 0;}
			#content4 .title p.webinar_about{width: 80%; padding: 10px;}
			#content4 .movie_block .mv_vol{display: block;}
			#content4 .movie_block .mv_vol iframe{width: 100%; height: 100%;}
		}

        section.ss_video{
            max-width: 854px; margin: 0px auto;
        }
        section.ss_video h3{ margin: 0 0 30px 0;}

        .movie-wrap {
            position: relative;
            padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
            height: 0;
            overflow: hidden;
        }
        
        .movie-wrap iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }