html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    word-break: normal;
    -moz-tab-size: 4;
    tab-size: 4
}

*, :after, :before {
    background-repeat: no-repeat;
    box-sizing: inherit
}

:after, :before {
    text-decoration: inherit;
    vertical-align: inherit
}

* {
    padding: 0;
    margin: 0
}

hr {
    overflow: visible;
    height: 0;
    color: inherit
}

details, main {
    display: block
}

summary {
    display: list-item
}

small {
    font-size: 80%
}

[hidden] {
    display: none
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

a {
    background-color: transparent;
    text-decoration: none;
}

a:active, a:hover {
    outline-width: 0
}

code, kbd, pre, samp {
    font-family: monospace, monospace
}

pre {
    font-size: 1em
}

b, strong {
    font-weight: bolder
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    border-color: inherit;
    text-indent: 0
}

input {
    border-radius: 0
}

[disabled] {
    cursor: default
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

textarea {
    overflow: auto;
    resize: vertical
}

button, input, optgroup, select, textarea {
    font: inherit
}

optgroup {
    font-weight: 700
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

[role=button], [type=button], [type=reset], [type=submit], button {
    cursor: pointer;
    color: inherit
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
    outline: 1px dotted ButtonText
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button
}

button, input, select, textarea {
    background-color: transparent;
    border-style: none
}

a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline-width: 0
}

select {
    -moz-appearance: none;
    -webkit-appearance: none
}

select::-ms-expand {
    display: none
}

select::-ms-value {
    color: currentColor
}

legend {
    border: 0;
    color: inherit;
    display: table;
    white-space: normal;
    max-width: 100%
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    color: inherit;
    font: inherit
}

img {
    border-style: none
}

progress {
    vertical-align: baseline
}

[aria-busy=true] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled=true] {
    cursor: default
}

li {
    list-style: none;
}

:root {
    --main-color: #E74545;
}

html {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: #373737;
}

/*ここから内容*/
body {
    header {
        height: 110px;
        position: fixed;
        top: 0;
        width: 100%;
        background: #f7f7f7;
        display: flex;
        justify-content: center;
        z-index: 99;
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.26);

        .header_wrap {
            display: flex;
            max-width: 1160px;
            width: 100%;

            .maker_info_wrap {

                padding: .8rem;
                display: flex;

                .logo_wrap {
                    max-width: 80px;
                    /*max-height: 80px;*/
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 100%;
                        display: block;
                    }

                    & + .company_info_wrap {
                        margin-left: 1rem;
                    }
                }

                .company_info_wrap {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .company_name {
                        font-size: 1rem;
                        font-weight: bold;
                    }

                    .company_address {
                        font-size: .8rem;
                    }

                    .company_website {
                        font-size: .7rem;
                        text-decoration: underline;
                    }

                    & > * {
                        display: block;
                    }
                }
            }

            .nav_wrap {
                flex-grow: 2;
                padding: .8rem;
                display: flex;
                justify-content: space-between;
                align-items: end;
                flex-direction: column;

                nav {
                    ul {
                        display: flex;
                        justify-content: end;
                        align-items: end;

                        li {

                            padding: .5rem 1rem;
                            color: #969696;
                            font-weight: bold;
                            & > a {
                                display: block;
                                font-weight: bold;
                                color: var(--main-color);
                            }
                        }
                    }
                }

                .info_page_button_wrap {
                    .button {
                        font-size: .8rem;
                        color: #ffffff;
                        background: var(--main-color);
                        font-weight: bold;
                        padding: .5rem 2rem;
                        display: block;
                    }
                }
            }
        }
    }

    main {
        margin-top: 110px;

        
        .content {
            
            padding: 4rem 2rem;
            .content_wrap {
                width:  100%;
                max-width: 1160px;
                margin: 0 auto;
                
                text-align: center;
                .swiper{
                 color: #0a66d4;
                }
                .swiper-wrapper{
                    align-items: center;
                }
                .swiper-slide{
                    padding: 1vw;
                    box-sizing: border-box;
                    & > *{
                        width: 100%;
                        height:  100%;
                        display: block;
                    }
                    .swiper_image{
                        aspect-ratio: 7 / 5;
                        display: block;
                    }
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    p{
                        margin-top: 1rem;
                        font-size: 1rem;
                        color: #373737;
                        font-weight: bold;
                    }
                    
                }
                
                .youtube_movies{
                    iframe{
                        width: 100%;
                    }
                    iframe:not(:first-child){
                        margin-top: 3rem;
                    }
                }
            }
            &:nth-child(odd) {
                background: #f7f7f7;
            }

            &:nth-child(even) {
                background: #ffffff;
            }
        }

        .top_image,
        .image_wrap {
            
            img {
                width: 100%;
                display: block;
            }
        }
        
        .image_wrap {
            
            padding: 4rem 2rem;
            img {
                max-width: 1160px;
                margin: 0 auto;
            }
        }
        .button_wrap {
            padding: 1rem;
            .button{
                margin: 0 auto;
                font-size: 1.2rem;
                font-weight: bold;
                color: #ffffff;
                background: var(--main-color);
                padding: 1rem 2rem;
                border-radius: .5rem;
                display: inline-block;
            }
        }
        
        .info_button{
            font-size: 2rem;
            font-weight: bold;
            color: #ffffff;
            background: #e74545;
            padding: 2rem 4rem;
            border-radius: 1rem;
            margin: 0 3rem;
            display: block;
            text-align: center;
        }
        .explanation{
            margin: 0 3rem;
            font-size: .8rem;
        }
        h2 {
            font-size: 2rem;
             
        }
        h3{
                margin-top: .6rem;
                font-weight: bold;
            }
        p{
            font-size: 1.2rem;
            margin-top: 1.5rem;
            
            & + h3 {
                margin-top: 3.5rem;
            }
        }

        .t_left {
            text-align: left;
        }

        .t_center {
            text-align: center;
        }

        .t_right {
            text-align: right;
        }
    }
    .bottom_buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: #ffffff;
        .button_wrap{
            display: flex;
            justify-content: space-evenly;
            padding: 1rem;
            .button{
                text-align: center;
                max-width: 300px;
                width: 100%;
                font-size: 1.2rem;
                font-weight: bold;
                padding: 1rem 1.5rem;
                color: #373737;
                background-color: #f2f2f2;
                border-radius:  .5rem;
                &.red{
                    color: #ffffff;
                    background: var(--main-color);
                }
            }
            .spacer{
                margin: 0 1rem;
            }
        }
        & + main{
            margin-bottom: 95px;
        }
    }
}

@media screen and (max-width: 768px){
    html{
        font-size: 14px;
    }
    body {
        header {
            height: 90px;
            .header_wrap {
                justify-content: space-between;
                .maker_info_wrap {
                    .logo_wrap {
                        max-width: 65px;
                        max-height: 65px;
                    }
                }
                .nav_wrap {
                    
                    transition: all .5s;
                    position: fixed;
                    top: 0;
                    right: -100%;
                    bottom: 0;
                    background: #ffffff;
                    width: 50%;
                    justify-content: start;
                    align-items: start;
                    box-shadow: -6px 0 10px 0 rgba(0, 0, 0, 0.26);
                    
                    .close_button{
                        width: 30px;
                        height:  30px;
                        position: relative;
                        margin-bottom: 1rem;
                        &::before,&::after{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            content: '';
                            width: 100%;
                            height: 3px;
                            background:  var(--main-color);
                            
                        }
                        &::before {
                            transform: translate(-50%,-50%) rotate(45deg);
                        }
 
                        &::after {
                            transform: translate(-50%,-50%) rotate(-45deg);
                        }
                    }
                    &.open {
                        right: 0;
                    }

                    .info_page_button_wrap{
                        width:  100%;
                        margin-bottom: 1rem;
                        
                        .button{
                            font-size: 1.2rem;  
                        }
                        a{
                            text-align: center;
                        }
                    }
                    nav {
                        width:  100%;
                        ul {
                            flex-direction: column;

                            li {

                                display: block;
                                width: 100%;
                                box-sizing: border-box;
                                padding: .5rem 1rem;

                                a {
                                }
                            }
                        }
                    }
                }
                .menu_button{
                    width: 90px;
                    background: var(--main-color);
                    padding: 1rem;
                    box-sizing: border-box;
                    display:  flex;
                    flex-direction: column;
                    justify-content: space-around;
                    span{
                        background: #ffffff;
                        width: 100%;
                        height: 3px;
                        display: block;
                    }
                }
            }
        }
        main{
            margin-top:  90px;
            h1,h2{
                font-size: 1.4rem;
            }
            .content{
                padding: 1.5rem;
            }
            .image_wrap{
                padding: 1.5rem 0;
            }
            .info_button{
                font-size: 1.2rem;
                padding: 1rem;
                margin-bottom: 1rem;
            }
        }
    }
}