@charset "UTF-8";

body{
    font-family: 'Roboto', 'Open Sans', 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #2c2c2c;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    /*background-image: url(../image/whitemarble2.jpg);
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; */
}

main{
    flex: 1;
}

footer {
    font-size: 20px;
    background-color: #F4CE7B;
    color: #000000;
    padding: 14px 10px 20px;
    text-align: center;
}  

/* solid018 */
.button_solid018 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 70px auto 90px ;
    max-width: 240px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #eee;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
}

.button_solid018 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

.button_solid018 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-48%);
    position: absolute;
    top: 48%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}


@media only screen and (max-width: 812px){
/*携帯画面*/

    header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; /* 必要に応じて調整 */
    }

    header h1 {
        margin: 0;
    }

    header h1 img {
        width: 110px;
        height: 110px;
        margin-top: 40px;
        position: relative;
        z-index: 1;
    }

    .Furigana{
        margin-top: 15px;
        font-weight: bold;
    }

    nav{
        margin-top: 40px;
        margin-bottom: 90px;
    }

    nav ul {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
    }

    nav ul li {
        margin: 0 10px; /* メニュー項目の間隔を調整 */
    }
    nav ul li a {
        display: block;
        padding: 3px 3px;
        text-decoration: none;
        color: #fff;
        background-color: #8d8d8d; /* ボタンの背景色 */
        border-radius: 5px; /* ボタンの角を丸める */
        transition: background-color 0.3s ease;
    }

    nav ul li a:hover {
        background-color: #0056b3; /* ホバー時の背景色 */
    }

    .CompanyComment{
        margin: 0 20px;
        text-align: center;
        font-size: 20px;
    }

    

    .openingStep{
        display: inline-block; /* インラインブロックにすることで幅を調整可能にする */
        padding: 10px 20px; /* パディングで内側の余白を追加 */
        background-color: #f8f9fa; /* 背景色を淡いグレーに設定 */
        border-left: 5px solid #007BFF; /* 左側に太めのボーダーを追加してアクセントに */
        font-weight: bold; /* 太字にして見やすくする */
        color: #333; /* 文字色を濃いグレーに設定 */
        margin-top: 70px; /* 上下に余白を追加 */
        margin-bottom: 40px;
        margin-left: 20px;
        margin-right: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), /*下*/
                    4px 0 4px rgba(0, 0, 0, 0.1);/*右*/
    }

    .openstepFlex {
        display: flex;
        flex-direction: column;  /* 子要素を縦に並べる */
        align-items: center;     /* 子要素を中央に揃える */
        gap: 20px;               /* 各セットの間隔を設定 */
    }

    .steplistItem {
        display: flex;
        flex-direction: column;  /* 子要素を縦に並べる */
        align-items: center;     /* 子要素を中央に揃える */
        text-align: center;      /* テキストを中央に揃える */
        background-color: #c9c9c95c;  /* 背景色を設定 */
        padding: 15px;           /* パディングを調整 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ボックスシャドウを追加 */
        border-radius: 8px;      /* 角を丸める */
        border: 1px solid #ccc;  /* ボーダーを追加 */
        width: 250px;            /* 幅を調整 */
    }

    .steplistItem:hover {
        filter: brightness(115%);
        background-color: #f0f0f0; /* ホバー時の背景色変更 */
        transform: scale(1.05); /* ホバー時の拡大 */
    }

    .steplistImage {
        margin-bottom: 10px;     /* 画像とタイトルの間に余白を追加 */
    }

    .steplistTitle h3 {
        font-size: 1.2em;        /* フォントサイズを調整 */
        color: #333;             /* 文字色を設定 */
    }

    /*1番目の項目ページ*/
    .nextPage h1{
        text-align: center;
        font-size: 34px;
        margin-bottom: 20px;
    }

    .stepDetail {
        display: flex;
        justify-content: center;
        /* Optional: Add padding or margin to adjust spacing around the section */
        padding: 20px;
    }

    .stepDetail ul {
        list-style-type: circle;
        text-align: left; /* Ensures that the list items are left-aligned */
    }

    .stepDetail li {
        margin-left: 20px; /* Optional: Adjust as needed to control the indentation of list items */
        font-size: 20px;
    }

    .stepdetailComment{
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 80px;
    }


}


@media only screen and (min-width: 430px) and (max-width: 812px){
    .openingStep{
        margin-left: 180px;
        margin-right: 20px;
    }

    /*1ページ目*/

    .nextPage h1{
        font-size: 40px;
    }

    .stepDetail li{
        margin-top: 5px;
    }

    .stepdetailComment{
        margin-top: 50px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 80px;
    }
}

@media only screen and (min-width: 813px){
    header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; /* 必要に応じて調整 */
    }

    header h1 {
        margin: 0;
    }

    header h1 img {
        width: 110px;
        height: 110px;
        margin-top: 40px;
        position: relative;
        z-index: 1;
    }

    .Furigana{
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
    }

    nav{
        margin-top: 40px;
        margin-bottom: 90px;
    }

    nav ul {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
    }

    nav ul li {
        margin: 0 10px; /* メニュー項目の間隔を調整 */
    }
    nav ul li a {
        display: block;
        padding: 3px 3px;
        text-decoration: none;
        color: #fff;
        background-color: #8d8d8d; /* ボタンの背景色 */
        border-radius: 5px; /* ボタンの角を丸める */
        transition: background-color 0.3s ease;
    }

    nav ul li a:hover {
        background-color: #0056b3; /* ホバー時の背景色 */
    }

    .CompanyComment{
        margin: 0 20px;
        text-align: center;
        font-size: 24px;
    }

    .openingStep {
        transform: scale(1.3);
        display: block;
        width: fit-content;
        margin: 70px auto 40px auto;
        padding: 10px 20px;
        background-color: #f8f9fa;
        border-left: 5px solid #007BFF;
        font-weight: bold;
        color: #333;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 4px 0 4px rgba(0, 0, 0, 0.1);
    }

    .openstepFlex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px; /* アイテム間の隙間 */
    }

    .steplistItem {
        display: block;
        width: calc(25% - 20px); /* 4つ並べるための幅調整 */
        text-align: center;
        background-color: #c9c9c95c;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition:  transform 0.3s;
    }

    .steplistImage {
        margin-bottom: 10px;     /* 画像とタイトルの間に余白を追加 */
    }

    .steplistTitle h3 {
        font-size: 1.2em;        /* フォントサイズを調整 */
        color: #333;             /* 文字色を設定 */
    }

    .steplistItem:hover {
        filter: brightness(115%);
        background-color: #f0f0f0; /* ホバー時の背景色変更 */
        transform: scale(1.05); /* ホバー時の拡大 */
    }

    .steplistImage img {
        width: 100%;
        height: auto;
    }

    .steplistTitle {
        margin-top: 10px;
    }

    /*1ページ目*/
    .nextPage h1{
        text-align: center;
        font-size: 44px;
        margin-bottom: 20px;
    }

    .stepDetail {
        display: flex;
        justify-content: center;
        /* Optional: Add padding or margin to adjust spacing around the section */
        padding: 20px;
    }

    .stepDetail ul {
        list-style-type: circle;
        text-align: left; /* Ensures that the list items are left-aligned */
    }

    .stepDetail li {
        margin-left: 20px; /* Optional: Adjust as needed to control the indentation of list items */
        font-size: 24px;
        line-height: 1.7;
    }

    .stepdetailComment{
        margin-top: 70px;
        margin-bottom: 50px;
        text-align: center;
        font-size: 20px;
    }
}