html {
    font-size: 100%;
}

body {
    /*background-color: #eff8fe;*/
    color: #24292e;
    font-family: "M PLUS Rounded 1c";
}

a {
    text-decoration: none;
}


p {
    font-size: 1.1rem;
}

img {
    max-width: 100%;
}


#header {
    display: flex;
    max-width: 960px;
    height: 70px;
    /*background-color: #1a4472;*/
    background-color: #FFFFFF;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    /*position: fixed;*/
    padding: 0 5%;
    /*z-index: 999;*/
}

header .title {
    color: #115184;
    line-height: 1px;
    font-size: 1.5rem;
}

.menu-item {
    list-style: none;
    display: inline-block;
    padding: 10px;
}

.nav-Contact {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    width: 100%;
    margin: 0 auto;
    padding: .6em 0.7em;
    border: 2px solid #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 3px #115184;
    background-color: #115184;
    color: #fff;
    font-weight: 600;
    font-size: 1em;

}

/*共通*/
.wrapper {
    max-width: 1080px;
    margin: 0 auto 120px auto;
    padding: 0 5%;
    
}

.wrapper-h1{
    padding: 0.25em 0.5em;
    color: #494949;
    background: transparent;
    border-left: solid 10px #7db4e6;
}

.hr {
    display: block;
    margin-top: 10px;
    border-style: none;
    border-top: 4px dotted #d7d7d7;
    margin-bottom: 20px;
}

/*main*/
.top-img {
    margin-bottom: 80px;


}


.top-img-1 {
    width: 100%;
    max-width: 1920px;
    height: 450px;
    object-fit: cover;



}

/*キャッチコピー*/
.sec-catchcopy {
    text-align: center;

}

.catchcopy-h1 {

    font-size: 2.6rem;
    margin-bottom: 60px;
}

.catchcopy-h2 {
    font-size: 1.6rem;
    line-height: 2;
}

/*プロフィール*/
.box2 {
    margin: 0 auto;
    margin-top: 15px;
    padding: 2em;
    /*内側余白*/
    position: relative;
    border: 6px solid #005fb1;
    /* 線の太さ・種類・色 */
    z-index: 0;

}

/*.box2:before {
    background-color: #4688bd;
    content: '';
    display: block;
    position: absolute;
    top: -6px;
    left: -6px;
    width: 6px;
    height: 6px;
    z-index: 1;
}*/

.about-main {
    position: relative;
    margin: 0 auto;

    padding: 0.25em 0.5em;
    color: #494949;
    background: transparent;
    border-left: solid 10px #7db4e6;
}



/*.about-main:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: -webkit-repeating-linear-gradient(-45deg, #115184, #115184 2px, #fff 2px, #fff 4px);
    background: repeating-linear-gradient(-45deg, #115184, #115184 2px, #fff 2px, #fff 4px);
  }*/

.about__inner {
    display: flex;
    width: 100%;
}

.about__img {
    width: 30%;
    text-align: center;
    margin: auto;
    
    /* 自動マージンを設定 */

}

.about-img {
    width: 200px;
    border-radius: 50%;
    border: 5px solid #115184;
}

.about__content {
    /*flex-basis: 50%;*/
    margin: 30px 0px 0px 30px;
    width: 70%;
}

.about__headline {
    margin-bottom: 15px;
    color: #115184;
}

.about__headline-en {
    display: block;
    margin-bottom: 10px;
    color: #115184;
    font-weight: 700;
    font-size: 20px;
    font-family: "Montserrat";
}

.about__headline-jp {
    font-weight: 700;
    font-size: 32px;
}

.about-p {
    line-height: 1.4;
}

.about-img-nintei {
    display: flex;
    margin-top: 20px;
}

.about-nintei {
    width: 100%;
}

.about-nintei-p {
    text-align: center;
}

.about-msg {
    margin-top: 20px;
    margin-bottom: 10px;
}


/*エモーションコード＆ボディコード*/
/*エモーションコード*/

.work-main-pc {
    position: relative;

}

.work-main-sp {
    display: none;
}

.EmotionHeart {
    margin-top: 30px;
    border: 1px solid #cbcbcb;
    box-shadow: 11px 13px 27px 6px rgb(0 0 0 / 10%);
    padding: 4%;
    /*background-color: #ffffff;*/
}

.EmotionCode-h2 {
    position: relative;
    padding-left: 25px;
}

.EmotionCode-h2:before {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 0;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 15px transparent;
    border-bottom: solid 15px rgb(119, 195, 223);
}

.EmotionCode-h2:after {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 10px;
    width: 100%;
    border-bottom: solid 3px rgb(119, 195, 223);
}

.EmotionCode-innner {
    display: flex;
    width: 100%;
}

.EmotionCode-text {
    width: 100%;
}

.Emotion-img-PC {
    width: 80%;
    
    margin-top: 30px;
    margin-left: 30px;
    
}

.EmotionCode-img {
    width: 100%;

}

.EmotionCode-p {
    margin-top: 30px;
    font-size: 1.1rem;
    
}



.Emotion-img-SP {
    display: none;
}

.list-008_PC {
    position: relative;
    padding: 1.5em 1em 1em 2.5em;
    border: 2px solid #2589d0;
    margin-top: 40px;
    width:80%;
}

.list-008_PC>div {
    position: absolute;
    top: -.75em;
    left: 1em;
    padding: 0 .5em;
    background-color: #fff;
    color: #2589d0;
    font-weight: 600;
}

.list-008_PC ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
    display: flex;
      flex-wrap: wrap;
}

.list-008_PC li {
    padding: .3em .3em .3em 0;
    width: calc(50% - 10px);
}

.list-008_PC li::marker {
    color: #2589d0;
    font-size: 1.1em;
}
.list-008_SP{
    display: none;
}

/*ハートの壁*/
.heart-wall {
    margin-top: 30px;
    margin-bottom: 15px;
}

.heart-wall-h2 {
    display: inline;
}

.heart-wall-h2:before {
    content: "❤";
    /* ハートマークのUnicodeを使用 */
    color: brown;
    margin-right: 5px;
    /* ハートマークとテキストの間隔を調整 */
}


/*ボディコード*/
.body-code {
    margin-top: 30px;
    border: 1px solid #cbcbcb;
    box-shadow: 11px 13px 27px 6px rgb(0 0 0 / 10%);
    padding: 4%;
}

.body-code-innner {
    display: flex;
}

.body-code-h2 {
    position: relative;
    padding-left: 25px;
}

.body-code-h2:before {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 0;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 15px transparent;
    border-bottom: solid 15px rgb(119, 195, 223);
}

.body-code-h2:after {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 10px;
    width: 100%;
    border-bottom: solid 3px rgb(119, 195, 223);
}

.body-code-p {
    margin-top: 30px;
}

ul.sample1 {
    padding: 0;
    font: 14px/1.6 'arial narrow', sans-serif;
    width: 500px;
    list-style: none;
    margin: 10px 0 0 20px;
}

ul.sample1 li {
    position: relative;
    padding: 0.5em 1em 0.5em 2.3em;
    margin-bottom: 5px;
    color: #115184;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #a8c0d8;
}

ul.sample1 li:after,
ul.sample1 li:before {
    content: "";
    position: absolute;
    border-radius: 50%;
}

ul.sample1 li:before {
    left: 0.2em;
    width: 17px;
    height: 17px;
    background: rgba(60, 164, 254, 0.5);
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

ul.sample1 li:after {
    top: 1.1em;
    left: 0.7em;
    width: 14px;
    height: 14px;
    background: rgba(60, 164, 254, 0.5);
}


.EmotionBody-PC {
    position: relative;
    padding: .5em 1em;
    color: #333333;
    max-width: 100%;
    margin: 2em auto;
    text-align: center;
}

.EmotionBody-PC::before,
.EmotionBody-PC::after {
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 100%;
    border: 3px solid #2589d0;
    box-sizing: border-box;
    content: '';
}

.EmotionBody-PC::before {
    top: 0;
    left: 0;
    border-right: none;
}

.EmotionBody-PC::after {
    bottom: 0;
    right: 0;
    border-left: none;
}

.EmotionBody-SP {
    display: none;
}

.body-code-img-PC {
    width: 60%;
    margin-top: 30px;
    margin-left: 30px;
    text-align: center;
    text-align: right;
}

.body-code-img {
    width: 85%;

}

/*料金*/

.session-h1 {
    font-size: 24px;
    color: #333333;
    margin-bottom: 20px;
}

.containers {
    width: 90%;
    background-color: #ffffff;
    padding: 1em 1.5em;
    border: 1px solid #a5a9ab;
    /*border:1px solid #84c1ff;枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /*影*/
    color: #000000;
    /*文字色*/

    display: flex;
}

.session-heading {
    font-size: 20px;
    margin-bottom: 10px;
    background: linear-gradient(transparent 70%, #2e76b4 70%);
    display: inline-block;
}

.session-table {
    width: 100%;
    border-collapse: collapse;
}

.session-th,
.session-td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #dddddd;
}

.session-th {
    font-weight: bold;
}

.session-left {
    margin-left: 120px;
}

.session-warning {
    margin-top: 20px;
    
}

.session-warning-p{
    font-size: 1.1rem;
}


/*フッター*/
.footer-002 {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 25px 10px 10px;
    background-color: #115184;
    margin: 0 auto;
}

.footer-002__logo {
    width: 130px;
    height: 30px;
}

.footer-002__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 1.5em;
    list-style-type: none;
    margin: 0 0 .5em;
    padding: .5em;
}

.footer-002__sns-icon {
    width: 21px;
    height: 21px;
}

.footer-002__copyright {
    margin: 0;
    color: #ffffffb3;
    font-weight: 200;
    font-size: .8em;
}

/*書籍情報*/
.booklink {
    display: flex;
}

.cc-imagewrapper{
    width: 50%;;
}

.book-set{
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.footer_title{
    color: #FFFFFF;
}

.booklink{
    color:#24292e;
}
/*sp*/
@media screen and (max-width:600px) {
    p {
        font-size: 0.94rem;
    }

    .wrapper {
        max-width: 1080px;
        margin: 0 auto 60px auto;
        padding: 0 5%;
        
    }

    .top-img {
        margin-bottom: 60px;
    
    
    }

    .catchcopy-h1 {
        font-size: 1.4rem;
        margin-bottom: 40px;
    }

    .catchcopy-h2 {
        font-size: 0.9rem;
    }

    /*プロフィール*/
    .about__inner {
        display: block;
        width: auto;
    }

    .about-nintei-p{
        font-size: 0.7rem;
    }

    .about__img {
        width: 100%;

    }

    .about__content {
        margin: 15px auto;
        width: 100%;
    }

    .about__headline {
        text-align: center;
    }

    .work-main-pc {
        display: none;
    }

    .work-main-sp {
        display: block;
    }

    /*エモーションコード*/
    .Emotion-img-PC {
        display: none;
    }

    .EmotionCode-innner {
        display: block;
    }

    .list-008 {
        width: 100%;
    }

    .EmotionCode-p {
        margin-top: 30px;
        font-size: 0.94rem;
    }

    .Emotion-img-SP {
        width: 100%;
        margin-top: 30px;
        margin-left: 0px;
    }

    .Emotion-img-SP {
        display: block;
    }

    .EmotionBody-SP {
        display: block;
        position: relative;
        padding: .5em 1em;
        color: #333333;
        max-width: 100%;
        margin: 2em auto;
        text-align: center;
        font-size: 1rem;
    }

    .EmotionBody-SP::before,
    .EmotionBody-SP::after {
        display: inline-block;
        position: absolute;
        width: 10px;
        height: 100%;
        border: 3px solid #2589d0;
        box-sizing: border-box;
        content: '';
    }

    .EmotionBody-SP::before {
        top: 0;
        left: 0;
        border-right: none;
    }

    .EmotionBody-SP::after {
        bottom: 0;
        right: 0;
        border-left: none;
    }

    .EmotionBody-PC {
        display: none;
    }

    ul.sample1 li {
        font-size: 12px;
    }

    ul.sample1 li:after {
        width: 12px;
        height: 12px;
    }

    .containers {

        width: 100%;
        display: block;
    }

    .session-left {
        margin-top: 40px;
        margin-left: 0px;
    }
    .body-code-img-PC{
        display: none;
    }
    
    .cc-imagewrapper{
        width: 100%;;
    }

    ul.sample1 {
        margin: 10px 0 0 0px;
    }
    .session-warning-p{
        font-size: 0.9rem;
    }
    .about-emotion-b{
        font-size: 0.9rem;
    }

    .about__headline-jp {
        font-size: 24px;
    }
    .about__headline-en {
        font-size: 16px;
    }

    .about-img {
        width: 140px;
        border-radius: 50%;
        border: 5px solid #115184;
    }
    .about-main {
        font-size: 1.2rem;
        border-left: solid 7px #7db4e6;
    }

    .wrapper-h1{
        font-size: 1.2rem;
        border-left: solid 7px #7db4e6;
    }
    .session-h1 {
        margin-bottom: 0px;
    }
    .EmotionCode-h2 {
        font-size:1.1rem;
    }
    .list-008_SP {
        position: relative;
        padding: 1.5em 1em 1em 2.5em;
        border: 2px solid #2589d0;
        margin-top: 40px;
        width:80%;
        display: block;
    }
    
    .list-008_SP>div {
        position: absolute;
        top: -.75em;
        left: 1em;
        padding: 0 .5em;
        background-color: #fff;
        color: #2589d0;
        font-weight: 600;
    }
    .list-008_PC{
        display: none;
    }
    .list-008_SP ul {
        list-style-type: disc;
        margin: 0;
        padding: 0;
    }
    
    .list-008_SP li {
        padding: .3em .3em .3em 0;
    }
    
    .list-008_SP li::marker {
        color: #2589d0;
        font-size: 1.1em;
    }
    .body-code-h2 {
        font-size:1.1rem;
    }
    .booklink{
        display: block;
    }
    .cc-imagewrapper{
        width: auto;
        text-align: center;
    }
    .book-set{
        font-size: 1rem;
        margin-bottom: 20px;
    }
    .book-description{
        
        text-align: center;
    }
}