@charset "UTF-8";

*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

:root {
    --text-color :#707070;
    --span-color :#f2112c;
    --second-color :#820B00;
}

body {
    font-family: "Noto+Sans+JP","sans-serif";
}

/*550以下の時の改行*/
.width-550-br {
    display: none;
}

.w-container{
    width: 90%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}


/*
それぞれの要素と要素の隙間

中
画面幅：1920px(最大)の時100px
画面幅：1280px(最小)の時80px

小
画面幅：1920px(最大)の時40px
画面幅：1280px(最小)の時20px

*/
.m-space {
    display: block;
    height: clamp(5rem, 2.500rem + 3.125vw, 6.25rem);
}

.s-space {
    display: block;
    height: clamp(1.25rem, -1.250rem + 3.125vw, 2.5rem);
}

@media screen and (max-width: 1279px), (min-aspect-ratio: 2.15/1)  {
    .s-space {
        height: 40px;
    }
}

/*
h2：各セクションのタイトル
画面幅：1920px(PC最大想定)の時28px
画面幅：1280pxの時20px

h3：タイトル下の説明文
画面幅：1920px(PC最大想定)の時24px
画面幅：1280pxの時15px

p：タイトル下の説明文
画面幅：1920px(PC最大想定)の時18px
画面幅：1280pxの時11px
*/
h2 span {
    color: var(--span-color);
}

h2 {
    color: var(--text-color);
    font-size: clamp(1.25rem, 0.250rem + 1.25vw, 1.75rem);
    font-weight: 700;
}

h3 {
    color: var(--text-color);
    font-size: clamp(0.938rem, -0.188rem + 1.406vw, 1.5rem);
    font-weight: 700;
}

p {
    color: var(--text-color);
    font-size: clamp(0.688rem, -0.188rem + 1.094vw, 1.125rem);
    font-weight: 700;
}


/*
h2：各セクションのタイトル
画面幅：1279px(PC最大想定)の時28px
画面幅：320pxの時20px

h3：タイトル下の説明文
画面幅：1279px(PC最大想定)の時24px
画面幅：320pxの時16px

p：タイトル下の説明文
画面幅：1279px(PC最大想定)の時18px
画面幅：320pxの時12px
*/
@media screen and (max-width: 1279px), (min-aspect-ratio: 2.15/1)  {
    h2 {
        font-size: clamp(1.25rem, 1.083rem + 0.834vw, 1.75rem);
    }

    h3 {
        font-size: clamp(1rem, 0.833rem + 0.834vw, 1.5rem);
    }

    p {
        font-size: clamp(0.75rem, 0.625rem + 0.626vw, 1.125rem);
    }
}


/*
====================ヘッダー=====================================================
*/

/*
header高さ
画面幅：1920px(PC最大想定)の時65px
画面幅：320pxの時50px
*/
header {
    background-color: #707070;
    width: 100%;
    height: clamp(3.125rem, 2.938rem + 0.938vw, 4.063rem);
    display: flex;
    color: #FFFFFF;
    font-size: 30px;
}

.header-container{
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
}


/*
ロゴ文字
画面幅：1920px(PC最大想定)の時40px
画面幅：320pxの時24px
*/
.logo {
    font-size: clamp(1.5rem, 1.300rem + 1vw, 2.5rem);
    font-weight: 500;
}

/*
====================ファーストビュー================================================
※画像の設定はレスポンシブ欄に記載
*/
.fv {
    height: calc(100dvh - clamp(3.125rem, 2.938rem + 0.938vw, 4.063rem));
    width: 100%;
    background-color: #e0ded9;
    display: flex;
    position: relative;
}

.fvimage {
    background-color: #f8e5db;
    max-width: 480px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.hori-image {
    display: none;
}

.var-image {
    display: block;
}

h1 {
    text-orientation: upright;    
}


.fv-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: clamp(1%, calc(1% + 2vw), 13%);
    left: 3%;
}

.fv-title {
    font-size: 70px;
    font-weight: 800;
    color: var(--span-color);

}

.fv-subtitle {
    font-size: clamp(1.5rem, 0.500rem + 1.25vw, 2rem);
}



.var-space {
    display: none;
}


/*1278px以下は縦に並べる*/
@media screen and (max-width: 1279px), (min-aspect-ratio: 2.15/1) {
    .fv {
        height: auto;
        flex-direction: column;
    }

    .fv-text {
        top: clamp(1%, 0.33vw, 3%);
        left: 10%;
    }

    /*1278:70px  320:32px*/
    .fv-title {
        font-size: clamp(2rem, 1.208rem + 3.962vw, 4.375rem);
    }

    .fv-subtitle {
        font-size: clamp(1rem, 0.499rem + 2.503vw, 2.5rem);
    }

    .fvimage {
        width: 100%;
        height: 300px;
        justify-content: flex-end;
        max-width: none;
    }

    .var-image {
        display: none;
    }

    .hori-image {
        display: block;
    }

    .var-space {
        display: block;
        height: 3rem;
    }
}




.fv-right {
    margin-right: auto;
    margin-left: auto;
    height: 100%;  
    width: 100%;  
    display: flex;
    flex-direction: column;
}


.textarea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.whitebox {
    width: 90%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    border-radius: 15px;
    padding: clamp(1.25rem, -2.250rem + 4.375vw, 1.6rem);
}


@media screen and (max-width: 1279px), (min-aspect-ratio: 2.15/1) {

    .fv-right {
        padding-bottom: 80px;
    }

    .textarea {
        flex-direction: column-reverse;
    }

    .whitebox {
        padding: clamp(1.5rem, 0.999rem + 2.503vw, 3rem);
    }
}





.text1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.text2 {
    display: flex;
    gap: 1rem;
    justify-content: space-around;
}

.card{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid var(--span-color);
    width: 250px;
    padding: 0.6rem;
    border-radius: 15px;
    gap: 0.5rem;
}

.card h3 {
    color: var(--second-color);
}


.card img {
    width: clamp(2.813rem, -1.563rem + 5.469vw, 5rem);
}

.text3 p {
    text-align: center;
}

.var-text {
    display: none;
}

@media screen and (max-width: 1279px), (min-aspect-ratio: 2.15/1) {
    .card img {
        width: 100px;
    }

    .var-text {
        display: flex;
        justify-content: center;
        padding-top: 1rem;
    }
}

@media screen and (max-width: 768px) {
    .text2 {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 80%;
    }
}




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

.text4 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text4 p {
    margin-bottom: 1rem;
}

.text5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem;
}

@media screen and (max-width: 1279px), (min-aspect-ratio: 2.15/1)  {
    .box2 {
        flex-direction: column;
    }

    .text5 {
        flex-direction: row;
        padding-top: 2rem;
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    .text5 {
        flex-direction: column;
    }
}



/*********************************************************
ボタン
**********************************************************/

.btn-a {
    display       : inline-block;
    border-radius : 15px;          /* 角丸       */
    font-size: clamp(1rem, 0.000rem + 1.25vw, 1.5rem);       /* 文字サイズ */
    font-weight   : 700;
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 20px 40px;   /* 余白       */
    background    : #00ff00;     /* 背景色     */
    color         : #0a590a;     /* 文字色     */
    line-height   : 1em;         /* 1行の高さ  */
    transition    : .3s;         /* なめらか変化 */
    box-shadow    : 4px 4px 3px #666666;  /* 影の設定 */
    border: 3px solid #0a590a;    /* 枠の指定 */
}

.btn-a:hover {
    box-shadow    : none;        /* カーソル時の影消去 */
    background    : #ffffff;     /* 文字色     */
}




.btn-b {
    display       : inline-block;
    border-radius : 15px;          /* 角丸       */
    font-size: clamp(1rem, 0.000rem + 1.25vw, 1.5rem);        /* 文字サイズ */
    font-weight   : 700;
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 20px 40px;   /* 余白       */
    background    : var(--second-color);     /* 背景色     */
    color         : #ffffff;     /* 文字色     */
    line-height   : 1em;         /* 1行の高さ  */
    transition    : .3s;         /* なめらか変化 */
    box-shadow    : 4px 4px 3px #666666;  /* 影の設定 */
    border: 3px solid #5a0904;    /* 枠の指定 */
}

.btn-b:hover {
    box-shadow    : none;        /* カーソル時の影消去 */
    color         : #710f06;     /* 背景色     */
    background    : #ffffff;     /* 文字色     */
    border: 3px solid #820B00;
    font-weight: 700;
}



@media screen and (max-width: 550px) {
    .btn-a,
    .btn-b {
        font-size: 0.8rem;
    }
}
















/*
====================フッター=====================================================
*/
.footer {
    background-color: #707070;
    color: #ffffff;
}

.footer .w-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-textbox {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.footer-left p {
    color: #ffffff;
}

/*
フッター　テーブルの文字サイズ
画面幅：767pxの時 16px
画面幅：320pxの時 12px

ロゴのサイズ
画面幅：767pxの時 16px
画面幅：320pxの時 200px

*/
@media screen and (max-width: 767px) {
    .footer-textbox {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-left img {
        width: clamp(12.5rem, 8.026rem + 22.371vw, 18.75rem);
    }

    td {
        font-size: clamp(0.75rem, 0.571rem + 0.895vw, 1rem);
    }
}

@media screen and (max-width: 550px) {
    .width-550-br {
        display: block;
    }

    h2 {
        text-align: center;
    }
}