@charset "UTF-8";

@media screen and (min-width: 835px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 834px) {
  .pc {
    display: none !important;
  }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    border: 0;
    list-style: none;
    vertical-align: baseline;
    text-decoration: none;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    font-size: 62.5%;
}

body {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    color: #000;
    background-color: #F6F5F3; 
    background-color: transparent; 
    font-size: 1.4rem;
    line-height: 1.86;
    font-family:"Noto Sans JP", sans-serif;
    font-weight:400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation-name:loading;
    animation-duration:1s;
    animation-fill-mode:forwards;
    animation-delay:0.4s;
    opacity:0;
}

@keyframes loading {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

div, main, section {
  position: relative;
  display: block;
}

*:focus {
  outline: none;
}

img {
  max-width: 100%;
  height:auto;
}

a {
    text-decoration: none;
    -webkit-transition-duration: 0.35s;
    -moz-transition-duration: 0.35s;
    -ms-transition-duration: 0.35s;
    -o-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

a:hover {
	opacity:0.7;
  filter: alpha(opacity=70);
  -moz-opacity:0.7;
}

a:link, a:visited {
  color:#000;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

header {
    position: absolute;
    left:0;
    top:0;
    margin:0 auto;
    width:100%;
    height:5.13333333vw;
    z-index:1;
}

.logo_apital{
    /*width:22.8rem;*/
    width:15.2vw;
    position:absolute;
    /*left:5.3rem;
    top:3.8rem;*/
    left:3.53333333vw;
    top:2.53333333vw;
}

.provide{
    /*font-size:1.4rem;
    line-height:2.4rem;*/
    font-size:0.93333333vw;
    line-height:1.6vw;
    text-align: right;
    position: absolute;
    /*right:3.5rem;
    top:2.9rem;*/
    right:2.33333333vw;
    top:1.93333333vw;
}

.provide_colon{
    font-weight:500;
}

.provide_heading{
    font-weight:600;
}

.hero {
    position: relative;
    margin:0 auto;
    /*width:150rem;
    height:88.2rem;*/
    width:100%;
    height:53.8vw;
    background-color:#F6F5F3;
}

.lead{
    /*font-size:1.5rem;
    line-height: 2em;*/
    font-size:0.95vw;
    line-height: 2vw;
    text-align: left;
    position:absolute;
    left:28.3%;
    top:33.6vw;
    transform: translateX(-50%);
    font-weight: 400;
}

.towebsite{
    position:fixed;
    width:307px;
    bottom:20px;
    right:-2px;
    line-height: 0;
    z-index: 10;
}

.towebsite img{
    max-width:100%;
    height:auto;
}

.fixedbg{
    position: relative;
    overflow: hidden;
    /* width: 100vw; */
    height: 40vw;
}

.fixedbg_Inner{
    position: absolute;
    left:0;
    top: 0;
    width: 100vw;
    height: 40vw;
    background-attachment: fixed;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;  
    z-index: -1;
}

.fixedbg_img_01{
    background-image: url(../img/section_bg_01.jpg);
}

.fixedbg_img_02{
    background-image: url(../img/section_bg_02.jpg);
}

.fixedbg_img_03{
    background-image: url(../img/section_bg_03.jpg);
}

.fixedbg_img_04{
    background-image: url(../img/section_bg_04.jpg);
}

.bg{
    /* width:100vw; */
    height:auto;
    position:relative;
    background-color: transparent;
    /*margin-bottom:-20.4rem;*/   /* SPで不具合発生のため、 「.dialogue」に設定*/
    padding-bottom:10rem;
    background-color: #F6F5F3;
}

.bg .dialogue:nth-last-child(1 of .bg .dialogue) {
    margin-bottom:-20.4rem;
}

.wrapper{
    width:100rem;
    margin:0 auto;
    position: relative;
    z-index:1
}

#section_01, #section_02, #section_03, #section_04{
    position:relative;
    top:-20.4rem;
}

.section_heading{
    display: inline-block;
    width:auto;
    height:13.8rem;
    padding:3.5rem 3rem;
    /* background: url(../img/h2_bg_pc.svg) no-repeat; */
    font-size:5rem;
    line-height: 1em;
    text-align: left;
    font-weight: 500;
    margin: 0 auto 2.35rem auto;
    position:relative;
    z-index:10;
    background-color: #fff;
    border: solid 9px #000;
    border-radius: 30px;
}

.section_heading strong{
    font-weight: 800;
    position:relative;
    /* text-decoration-color: #FFD03D;
    text-decoration-line: underline;
    text-decoration-thickness: 0.4em;
    text-underline-offset: -0.04em; */
    font-feature-settings:"palt";
    margin-left:0.3em;
    margin-right:0.3em;
}

.dialogue{
    width:100%;
    background-color: #fff;
    padding-top: 3.5rem;
    padding-left: 5.2rem;
    padding-right: 5.2rem;
    padding-bottom: 4.4rem;
}

.dialogue+.dialogue{
    margin-top:6rem;
}

.dialogue_heading{
    font-size: 3rem;
    line-height: 1em;
    height:5.6rem;
    font-weight: 700;
    margin-bottom:3.3rem;
    /* background: url(../img/h3_bg_pc.svg) no-repeat;
    background-position:bottom; */
    display: flex;
    justify-content: flex-start;
    column-gap: 1.2rem;
    border-bottom: solid 4px #000;
}

.dialogue_q{
    width:3.673rem;
    min-width:3.673rem;
    line-height: 0;
    margin-left:0.2rem;
    position:relative;
    top:-0.4rem;
}

.dialogue p{
    font-size:1.4rem;
    line-height: 2.6rem;
}

.dialogue p strong{
    font-weight: 700;
}

.dialogue p+p{
    margin-top:2.6rem;
}

.dialogue_graphic_explanation+p{
    margin-top:3.3rem;
}

.dialogue_question{
    font-weight: 600;
}

.obata{
    color:#5D4495;
    font-weight: 700;
}

.tamura{
    color:#EE6542;
    font-weight: 700;
}

.dialogue_graphic_explanation{
    width:100%;
    border:solid 0.1rem #707070; 
    margin-top: 3.4rem;
    line-height: 0;
}

.dialogue_ph{
    width:100%;
    margin-top: 3.4rem;
    line-height: 0;
}

.dialogue_ph_caption{
    font-size: 1.4rem;
    line-height: 1em;
    font-weight: 600;
    margin-top:1em;
    margin-bottom:-0.5rem;
}

.dialogue_graphic_explanation_caption{
    font-size: 1.4rem;
    line-height: 1.57142857em;
    margin-top:0.6rem;
    /*margin-bottom:4rem;*/
    margin-bottom:3rem;
    word-break: break-all;
}

.caption_last{
    margin-bottom:-0.5rem;
}

.dialogue_graphic_explanation_caption strong{
    font-weight:600;
}

.dialogue_annotation{
    font-size: 1.1rem;
    line-height:1.81818182em;
    margin-top:0.9rem;
}

#section_05{
    background-color:#fff;
    width:100%;
    padding-top: 4.2rem;
    padding-bottom: 3.95rem;
}

.teacher_profile{
    width:66.1rem;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
}

.teacher_profile li{
    width:28.3rem;
}

.teacher_profile_ph{
    line-height: 0;
    margin-bottom:1.2rem;
}

.teacher_profile_name{
    font-size: 1.6rem;
    line-height: 1em;
    font-weight:700;
    margin-bottom:1.05rem;
}

.teacher_profile_text{
    font-size: 1.2rem;
    line-height: 1.58333333em;
    font-weight: 500;
}

.sns_area{
    width:100%;
    background-color: #F6F5F3;
    padding-top:5.1rem;
    padding-bottom:6rem;
}

.sns_area_pagetop{
    width:4.4855rem;
    line-height: 0;
    margin: 0 auto 4.85rem;
}

.sns_area_share{
    font-size:3rem;
    line-height: 1em;
    text-align: center;
    font-weight: 700;
    margin-bottom:1.7rem;
}

.sns_area_link {
    display: flex;
    justify-content: center;
    column-gap: 3.36rem;
}

.sns_area_link li{
    width:6.5869rem;
    line-height: 0;
    cursor: pointer;
}

#pagetop{
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

#pagetop:hover{
    transform: translateY(-0.7rem);
}

.minus_half_indent{
    text-indent:-0.5em;
}


/*------------------------------------------------------------*/
footer {
  background-color: #000;
  color:#fff;
  padding: 1.7rem 0 1.9rem;
}
footer p {
  display: block;
  width: 90%;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.5em;
  font-weight: 400;
  text-align: center;
}
footer p span {
  display: inline-block;
  margin-top: 0;
}
/*------------------------------------------------------------*/
#article-end {
    position: relative; 
    z-index:-1;
    margin-top:-1px;
    display:none;
}
/*------------------------------------------------------------*/

/*==================================================
ふわっ
===================================*/

.fadeInTrigger{
opacity:0;
}

/* 早さ　*/
.fadeInTrigger.type1 {
    animation-duration:0.5s;
}

.fadeInTrigger.type2 {
    animation-duration:1s;
    animation-delay:0.2s;
}

.fadeInTrigger.type3 {
    animation-duration:1.2s;
    animation-delay:0.2s;
}

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
animation-delay:0.2s;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@media (max-width: 834px) {
    header {
        position: relative;
        top:0;
        left:0;
        height:3.6rem;
        border-bottom:solid 0.1rem #d6d6d6;
        background-color:#fff;
    }

    .logo_apital{
        width:11.7rem;
        position:absolute;
        left:0.8rem;
        top:0.7rem;
    }

    .provide{
        font-size:0.8rem;
        line-height:1.2rem;
        right:0.8rem;
        top:0.7rem;
    }
    .hero {
        height:128.8vw;
    }

    .lead{
        font-size:1.5rem;
        line-height: 1.87em;
        text-align: left;
        position:relative;
        left:0;
        top:0;
        transform: none;
        padding-top:2.1rem;
        padding-left:2.4rem;
        padding-right:2.4rem;
        padding-bottom:2.1rem;
        background-color: #fff;
    }

    .towebsite{
        width:62.66666667vw;
        right:-0.4vw;
    }

    .wrapper{
        width:34.7rem;
        margin:0 auto;
    }

   .section_heading{
        width:auto;
        height:15.68rem;
        padding-top:1.4rem;
        /* background: url(../img/h2_bg_sp.svg) no-repeat; */
        font-size:3.2rem;
        line-height: 3.5rem;
        margin-bottom:1.35rem;
    }

    .dialogue_heading{
        font-size: 2.7rem;
        line-height: 3.1rem;
        height:11.2rem;
        margin-bottom:3.3rem;
        /* background: url(../img/h3_bg_sp.svg) no-repeat;
        background-position:bottom; */
    }

    .dialogue_q{
        width:3.673rem;
        min-width:3.673rem;
        width:3.9rem;
        min-width:3.9rem;
        top:2.1rem;
    }

    .dialogue_heading_2l .dialogue_q{
        top:0.8rem;
    }

    .dialogue_heading_2l{
        height:9.1rem;
    }

    .dialogue{
        padding-top: 2.7rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
        padding-bottom: 4.4rem;
        padding-bottom: 3.8rem;
    }

    .teacher_profile{
        width:28.3rem;
        margin:0 auto;
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        row-gap: 3.3rem;
    }

    footer p {
        text-align: left;
    }

    .fixedbg{
        height:100vw
    }

    .fixedbg_Inner{
        height:100vh;
        background-attachment: local;
        position: fixed;
    }

     .fixedbg_img_02, .fixedbg_img_03, .fixedbg_img_04{
        display: none;
    }

    .fixedbg_img_01{
        background-position: 35%;
    }

    .fixedbg_img_03{
        background-position: 51%;
    }

    .fixedbg_img_04{
        background-position: 66%;
    }

    .bg{
        padding-bottom:7rem;
    }

    .section_heading strong{
        text-underline-offset: -0.25em;
    }

}