body {
    margin: 0;
    padding: 0;
    background-color: #fff; 
    min-height: 100vh;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}


.font18{
    font-size:18px;
}

.font12{
    font-size:12px;
    position: relative;
    top:-20px;
}

h2{
    font-size:40px;
}

li{
    list-style: none;
}

nav{
    color: #af823e;
}

.wrapper {
    width: 100%;
    box-sizing: border-box;
    display: block;
    background-color: #fff; /* wrapperの背景は白のまま */
}

.left-sidebar {
    width: 275px; /* 左側の幅 */
    background-color: #fff; /* 左側の背景色 */
    padding: 20px;
    padding-top:105px;
    box-sizing: border-box;
    position: fixed; /* 固定配置にする */
    top: 0;
    left: 145px;  /* 画面左側に145pxの余白 */
    height: 100vh; /* 画面の高さいっぱいに */
    overflow-y: auto; /* 必要に応じてスクロール可能にする */
    z-index: 100; /* 他の要素より手前に表示 */
}

.left-sidebar header h1 {
    margin-top: 0;
    font-size: 25px;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 80px;
}

.left-sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.left-sidebar nav ul li {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
}

.left-sidebar nav ul li:nth-child(2) {
 margin-bottom: 40px;
}


.left-sidebar nav ul li a {
    text-decoration: none;
    color: #af823e;
}

.brown-btn{
    background:#efe6d8 ;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 45px;
}

header{
    padding-top: 35px;
}

header a{
    display: block;
    text-align: center;
}

.left-text{
    text-align: left;
}

.content {
    background-color: #ffffff; /* メインコンテンツの背景色 */
    padding: 20px;
    box-sizing: border-box;
}

.hero {
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/hero-img.jpg);
    background-color: #eee;
    background-size: cover;
    background-repeat: no-repeat;
    height: 810px;
    margin-bottom: 20px;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    text-align: center;
}

.hero h2 {
    font-size: 2em;
    font-weight: 400;
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/wavy-line.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mv-catch{
    display:flex;
    text-align: left;
    padding-left: 20px;
    padding-top: 20px;
}

.mv-catch-detail1{
    width:40px;
    height: 245px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:100px;
    letter-spacing: 5px;
}

.mv-catch-detail2{
    width:40px;
    height: 370px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:140px;
    left:10px;
    letter-spacing: 5px;
}


.hero h3 {
    line-height: 1.6;
    writing-mode: vertical-rl;
    color: #fff;
    background-color: #1b1b3e;
    /* padding-top: 40px; */
    padding-left: 10px;
    padding-right: 10px;
}

.grade-bg{
     background: linear-gradient(#fff, #efe6d8);
}

.sample-request{
    width: 100%;
    margin: 0 auto;
    position: relative;
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/sample-request-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 100px;     
}

.sample-img{
position: absolute;
top:-6px;
left:18px;
}

.sample-block{
    position: relative;
    top:31px;
    left: 225px;
    width:250px;
}

.block-detail{
    position: relative;
    top:-35px;
    left:10px;
    border-top:1px solid #000;
    border-bottom: 1px solid #000;
    width:200px;
    line-height: 0.5em;

}

.block-detail p{
    padding-top: 0;
    padding-bottom: 0;
}

.fa-envelope{
    margin-right: 10px;
}

.brown-speech-bubble{
display: block;
background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/brown-speech-bubble.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-align: center;
 width:230px;
 height: 65px;
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 padding-bottom: 15px;
}



.bg-brown{
 color: #fff;
 background: #af823e;
}

.bg-brown2{
 display: inline;
 color: #fff;
 background: #af823e;
 padding:7px;
 border-radius: 10px;
}

.font20{
    font-size: 20px;
}

.font24{
    font-size: 24px;
}

.font30{
    font-size: 30px;
}

.font96{
    font-size: 96px;
}

.font-brown{
    color:#af823e;
}

.font-red{
    color:#ea545d;
    /* font-family: Minion Variable Concept; */
    font-weight: bold;
    font-style:italic;
}

.red-circle{
    display: inline-block;
    background: #bc4d54;
    color: #fff;
    border-radius: 50%;
    width:50px;
    height: 50px;
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center;   
    position: relative;
    top:5px;
    left: 10px;
}

.red-text{
    position: relative;
    top:-33px;
    right:-70px;
}

.blue-box{
    background: #1b1b3e;
    color: #fff;
    width:70px;
    height: 70px;
    position: absolute;
    top:263px;
    left:40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sample-request ul{
    width:340px;
    position: relative;
    right:-80px;
    top:10px;
}

.sample-btn{
 font-size: 26px;
 display:block;
 width:70%;
 margin: 0 auto;
 background: linear-gradient(to bottom, #f05a24 50%, #eb4311 50%); 
 padding:10px 20px;
 border-radius: 10px;
 color: #fff;
 text-decoration: none;
 text-align: center;
 margin-top: 20px;
 position: relative;
 top:20px;
}

.contact-btn{
 font-size: 26px;
 display:block;
 width:70%;
 margin: 0 auto;
 margin-top: 20px;
 background: linear-gradient(to bottom, #8bc53f 50%, #65aa23 50%); 
 padding:10px 20px;
 border-radius: 10px;
 color: #fff;
 text-decoration: none;
 text-align: center;
 position: relative;
 top:30px;
}

.six-zero{
    position: relative;
    padding-bottom: 100px;
    border-bottom: 10px solid #efe6d8;
}

.six-zero h2{
text-align: center;
line-height: 0.8;
}

.six-zero p{
    text-align: center;
}

.six-zero ul{
    text-align: center;
    display:flex;
    justify-content: center;
    padding-left: 0;
}

.six-zero li{
    width:100px;
    height:100px;
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/six-zero-circle.png);
    background-size: contain;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.eiyodashi-powder{
    width:277px;
    position: absolute;
    top:37%;
    left: 22%;;
    
}

.six-zero-bg{
    position: absolute;
    z-index: 1;
    bottom: -80px;
    width:100%;
}

.dots {
  -webkit-text-emphasis: filled;
  text-emphasis: filled;
}

.circle1{
    position: relative;
    right:20px;
    top:45px;
}

.circle3{
    position: relative;
    left:20px;
    top:45px;
}

.circle4{
    position: relative;
    right:20px;
    bottom:45px;
}

.circle6{
    position: relative;
    left:20px;
    bottom:45px;
}

.mt200 {
 margin-top: 190px;
}

.mutenka{
    position: relative;
    z-index: 1;
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/iwashi-bg.png);
    background-size: cover;
    height:600px;
    margin-top: -110px;
    width:100%;
    height:100vh;
}
.text-center{
    text-align: center;
}

.mutenka p{
  position: relative;
  top:150px;
  font-size:24px;
  line-height: 2;
}

.mutenka .font-brown{
    border-bottom: dotted 5px #af823e;
}

.datagraph{
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/datagraph-bg.png);
    background-repeat: repeat; 
    text-align: center;
    padding-bottom: 50px;
    position: relative;
}

.datagraph h2{
    font-size:32px;
    line-height: 3;
    color: #fff;
    background: #1b1b3e;
    margin-top: 0;
    margin-bottom: 40px;
}

.blue-triangle{
    position: relative;
    bottom: 50px;
}

.blue-triangle2{
    position: relative;
    bottom: 30px;
}

.brown-border{
    font-size: 26px;
    line-height: 2;
    color: #af823e;;
    width:95%;
    margin: 0 auto;
    margin-top: 20px;
    padding-bottom: 25px;
    padding-top: 7px;
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/linebrown-speechbubble.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



.datagraph li{
    text-align: left;
}


.datagraph h3 {
    font-size:40px;
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/wavy-line.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.datagraph p {
    margin-bottom: 50px;
}

.bg-white{
    background-color: #fff;
    border-radius: 30px;
    width:90%;
    margin: 0 auto;
    padding-top: 28px;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

.yokonarabi{
    display:flex;
    justify-content: space-around;
}

.gray-border{
    border:solid 1px #404040;
    width:90%;
    margin: 0 auto;
    font-size: 12px;
    text-align: left;
}

.gray-border p{
    padding-left: 10px;
    margin-bottom: 0;
}

.gray-border ul{
    padding-left: 10px;
}

.iwashibushi-bg{
    font-size: 30px;
    width:90%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 0 auto;
    color: #fff;
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/iwahibushi.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.plus-circle{
    font-size: 50px;
    width:70px;
    height: 70px;
    color:#af823e;
    background-color: #efe6d8;
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: absolute;
    left:42%;
    bottom:516px;
}

.katsuobushi-bg{
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/katsuobushi.png);
    width:45%;
    font-size: 24px;
    color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-top: 0;
}

.mejikabushi-bg{
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/mejikabushi.png);
    width:45%;
    font-size: 24px;
    color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-top: 0;
}

.domestic{
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/domestic-bg.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 120px;   
}

.scene{
    text-align: center;
    position: relative;
    padding-bottom: 50px;
}

.scene h2{
    text-align: center;
    font-size:28px;
    letter-spacing: -1px;
    line-height: 3;
    color: #fff;
    background: #1b1b3e;
    margin-top: -50px;
}

.scene p{
    font-size: 22px;
}

.scene img{
    /* margin-top: 50px; */
    margin-bottom: 10px;
}

.scene h3 {
    font-size: 22px;
    font-weight: normal;
    position: absolute;
    line-height: 1.6;
    writing-mode: vertical-rl;
    color: #fff;
    background-color: #1b1b3e;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
}

.scene-catch{
    display:flex;
    text-align: left;
    padding-left: 20px;
    padding-top: 20px;
}


.scene-catch-detail1{
    width:30px;
    height: 245px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:160px;
    left:100px;
    letter-spacing: 5px;
}

.scene-catch-detail2{
    width:30px;
    height: 145px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:160px;
    left:30px;
    letter-spacing: 5px;
}

.scene2-catch-detail1{
    width:30px;
    height: 178px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:560px;
    right:100px;
    letter-spacing: 5px;
}

.scene2-catch-detail2{
    width:30px;
    height: 293px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:560px;
    right:30px;
    letter-spacing: 5px;
}

.scene3-catch-detail1{
    width:30px;
    height: 261px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:980px;
    left:30px;
    letter-spacing: 5px;
}


.review{
    text-align: center;
}

.review h2{
  position: relative;
  top:30px;
}

.review .bg-brown{
padding-left: 10px;
padding-right: 10px;
font-weight: normal;
}

.beige-semicircle{
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/beige-semicircle.png);
    background-size: cover;
}

.wrapper-brown{
    background-color: #efe6d8;
    margin-top: -33px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.wrapper-white{
    background-color: #fff;
    height: 500px;
    width:80%;
    margin: 0 auto;
    border-radius: 15px;
}

.attempt{
    background-color: #efe6d8;
    padding-top: 50px;
    text-align: center;
    position: relative;
}

.attempt h2{
padding-top: 100px;
padding-bottom: 70px;
}

.attempt p{
background-color: #fff;
text-align: left;
margin-top: -50px;
padding-top: 70px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 50px;
}

iframe{
    margin-top: -70px;
}

.white-semicircle{
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/white-semicircle.png);
    background-size: cover;
}

.spoon{
    position: absolute;
    top:0;
    left:150px;
}

.brown-triangle{
   display: block;
   text-align: center;
   position: relative;
   top:20px;
}

.comic{
    text-align: center;
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/introduction-bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    padding-top: 50px;
    padding-bottom: 450px;
    background-color: #efe6d8;;
}

.comic img{
    margin-bottom: -6px;
}

.introduction{
    text-align: center;
}

.introduction h2{
    position: relative;
    top:-95px;
    font-weight: normal;
}


.introduction p{
    position: relative;
    top:-150px;
    font-size: 22px;
}

.qa{
    text-align: center;
}

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 90%;
    /* max-width: 900px; */
    margin:0 auto;
    padding-left: 0;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
	border: 0px solid #ccc; 
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 3% 50px 3% 3%;
    transition: all .5s ease;
    text-align: left;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.title::before{
    top:48%;
    right: 15px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 15px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #f3f3f3;
	margin:0 3% 3% 3%;
    padding: 3%;
    text-align: left;
}


footer {
    color: #fff;
    text-align: center;
    padding-bottom: 20px;
}

.navy-semicircle{
    background-image: url(https://eiyou-dashi.com/wp-content/themes/midorikawa/img/footer-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
     padding-top: 30px;
}

.bg-navy{
    background-color: #1b1b3e;
    padding-top: 20px;
    margin-top: -10px;
    padding-bottom: 50px;
}

footer h2{
    color: #fff;
    font-size:32px;
    text-align: left;
    margin-left: 20px;
}

footer ul{
    text-align: left;
    padding-left: 20px;
}

/* スマートフォンなどの小さい画面の場合 */
@media screen and (max-width: 768px) {

    .datagraph{
        top:165px;
    }

    .scene h2{
        margin-top: 150px;
    }

    body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 0;
        background-color: #fff;
    }

    h2{
        font-size: 28px;
    }

    .wrapper {
        max-width: none;
        margin: 0;
        width: 100%;
    }

    .left-sidebar {
        width: 100%;
        padding: 15px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: static;
        height: auto;
        overflow-y: visible;
        z-index: auto;
        left: auto;
    }

    .left-sidebar{
        display: none;
    }

    .left-sidebar header h1 {
        margin: 0;
        font-size: 1.5em;
    }

    .left-sidebar nav ul {
        display: flex;
        margin: 0;
        padding: 0;
    }

    .left-sidebar nav ul li {
        margin: 0 10px 0 0;
    }

    .content {
        width: 100%;
        margin: 0;
        padding: 15px;
    }

    .hero {
        height: auto;
        background-size: cover;
        padding: 40px 20px;
    }

    .hero h2{
        margin-right: 0;
        margin-left: 0;
        font-size:28px;
    }

    .mv-catch-detail1{
        top:0;
        left:-80px;
    }

    .mv-catch-detail2{
        top:40px;
        left:-50px;
    }

    .sample-request{
        width:100%;
        max-width:450px;
        top:0;
        background-size: 105%;
        background-position: center;
        padding-bottom: 0;
    }
    
    .sample-img{
        top:-40px;
        left:-25px;
        width:50%;
    }

    .sample-block{
        top:10px;
        left: 147px;
    }

.brown-speech-bubble{
    width:200px;
}

.brown-speech-bubble::after{
    display:none;
}

    .sample-request ul{
        top:-30px;
        right:-50px;
        width:275px;
        font-size: 14px;
    }

    .sample-btn {
      width:75%;
      font-size:22px;
      top:-30px;
    }

    .contact-btn {
      width:75%;
      top:12px;
      font-size:22px;
      top:-40px;
    }

    .block-detail{
        font-size: 16px;
    }

    .blue-box{
        top:235px;
        left:18px;
    }

    .mutenka{
        background-size: contain;
        background-repeat: no-repeat;
    }

    .mutenka p{
        padding-top: 40px;
        top:50px;
    }

    .datagraph h2{
        margin-top: -300px;
        font-size:22px;
        padding-top: 20px;
    }

    .datagraph h3{
        font-size:26px;
    }

    .font20{
        font-size: 16px;
    }

    .datagraph img{
        max-width:100%;
    }

    iframe{
    width:100%;
    padding-top: 80px;
    background-color: #fff;
    }

    .scene h2{
        font-size:20px;
    }

    .scene h3{
        font-size:20px;
    }

    .scene p{
        font-size:20px;
    }
 

    .scene img{
        max-width:100%;
    }

    .scene-catch-detail1{
        top:140px;
        left:50px;
    }

    .scene-catch-detail2{
        top:140px;
        left:-10px;
    }

    .scene2-catch-detail1{
        top:560px;
    }

    .scene2-catch-detail1{
        top:555px;
        right:70px;
    }
    
    .scene2-catch-detail2{
        top:555px;
        right:10px;
    }

    .scene3-catch-detail1{
        top:1000px;
        left:10px;
    }

    .white-semicircle{
        background-size: contain;
        background-repeat: no-repeat;
    }

    .attempt h2{
        padding-bottom: 60px;
    }
    .comic img{
        width:90%;
    }

    .introduction img{
        max-width:100%;
    }

    .bg-navy{
        margin-top: -30px;
    }

    .navy-semicircle{
        padding-top: 20px;
    }

}

/* PCなどの広い画面での設定 */
@media screen and (min-width: 769px) {
    body {
        padding-left: calc(145px + 275px); /* 左余白(145px) + サイドバー幅(200px) = 345px */
        padding-right: 145px;             /* 右側にも145pxの余白 */
    }

    .wrapper {
        margin-left: 20px; /* サイドバーとコンテンツの間の余白 */
        margin-right: auto;
        max-width: 530px;   /* ★変更点：中央コンテンツエリアの最大幅を530pxに */
    }

    .content {
        width: 100%;
    }

    body::before,
    body::after {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        background-color: #fff;
        z-index: -1;
    }

    body::before { /* 左サイドバーの背景の役割 */
        left: 145px; /* 画面左端からのグローバル余白 */
        width: 200px; /* サイドバーの幅 */
    }

    body::after { /* 右側の余白の背景 (帯状) */
        right: 145px; /* 画面右端からのグローバル余白 */
        /*
         * 右側の背景帯の幅を計算。
         * 画面幅から左右のグローバル余白(各145px)を引き、
         * さらにコンテンツ全体の占有幅(サイドバー200px + 間のギャップ20px + wrapper最大幅530px = 750px)を引いた残りを2で割る。
         */
        width: calc((100vw - 145px - 145px - (200px + 20px + 530px)) / 2); /* ★変更点：wrapperの幅を530pxで計算 */
        /* 上記の計算は (100vw - 290px - 750px) / 2 = (100vw - 1040px) / 2 と同等 */
    }
}