@charset "utf-8";

/* CSS カスタムプロパティ */
:root{
    --font-family-gothic:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    --font-family-mincho:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    --font-family-marugo:'Jun 201','Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    --font-family-marugo-bold:'Jun 501','Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    --text-color:#000;
    --ratio-calc: calc(100vw / 1920);
    --ratio-calc-sp: calc(100vw / 640);
}

/* 基本・共通情報 */
body {
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-family-marugo);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    color: var(--text-color);
    line-height: 1.3;
    font-feature-settings: "palt" 1;
    overflow: scroll;
}
a{
    color: var(--text-color);
    text-decoration: none;
}
a:hover{
    color: var(--text-color);
}
@media(min-width: 641px){
    a[href^="tel:"]{
        pointer-events: none;
    }
}
p{
    margin: 0 0;
}
img{
    display: block;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix:before {
    content: "";
	display: block;
	clear: both;
}
.clearfix {
	display: block;
}
.disp-sp{
    display: none;
}

header{
    position: relative;
    width: 1920px;
    height: 175px;
    margin: 0 auto;
    text-align: left;
    color: var(--text-color);
    background-color: #FFF;
    z-index: 2;
}
header .company{
    display: inline-block;
    position: relative;
    width: 410px;
    margin-left: 100.8px;
    padding-top: 37.4px;
    text-align: left;
    color: var(--text-color);
}
header .company .copy{
    margin-bottom: 15px;
    letter-spacing: 0.2em;
    font-size: 21px;
}
header .company .company-type{
    display: inline-block;
    line-height: 1.2;
    font-size: 22.7px;
}
header .company .company-name{
    display: inline-block;
    margin-left: 13.8px;
    line-height: 1.0;
    font-family: var(--font-family-marugo-bold);
    font-size: 55px;
    font-weight: bold;
}
header nav{
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-left: 302.4px; /* 「購入する」非表示用 */
    xmargin-left: 139px;
    margin-top: 61px;
}
header nav p{
    display: inline-block;
    margin-right: 80px; /* 「購入する」非表示用 */
    xmargin-right: 68px;
    line-height: 1.3;
    font-size: 28.7px;
    text-align: center;
    letter-spacing: 0.09em;
}
header nav p span{
    font-size: 20px;
}
header nav .contact{
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-top: 9px;
    padding: 11.3px 20px 12.7px 19.4px;
    border: 0.25px solid var(--text-color);
}
header nav .contact img{
    display: inline-block;
    width: 32px;
    margin-left: 15.1px;
}
header .menu-pc{
    font-size: 28.7px;
}
.head{
    display: block;
    z-index: 1;
}
.head .head-message-box{
    display: block;
    position: absolute;
    top: 507px;
    right: 148px;
    min-width: 230px;
    text-align: center;    
}
.head .head-message1{
    display: block;
    position: relative;
    font-size: 80px;
    line-height: 0;
    color: #FFF;
}
.head-message1::after{
    display: inline-block;
    position: relative;
    content: '';
    width: 100%;
    top: 40px;
    border-top: 1px solid #FFF;
}
.head .head-message2{
    display: block;
    position: relative;
    margin-top: 70px;
    font-size: 29px;
    line-height: 1;
    color: #FFF;
}
main{
    display: block;
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 1920px;
}
@media screen and (max-width:640px){
    .disp-sp{
        display: block;
    }
    .disp-pc{
        display: none;
    }
    header nav{
        margin: 0 0;
    }

    .menu-btn-label{
        position: absolute;
        margin: 0 0;
        top: 30px;
        top: min(30px, 30 * var(--ratio-calc-sp));
        left: 30px;
        left: min(30px, 30 * var(--ratio-calc-sp));
        font-size: 19.26px;
        font-size: min(19.26px, 19.26 * var(--ratio-calc-sp));
        letter-spacing: 0.1em;
    }
    /*　ハンバーガーボタン　*/
    .menu-btn {
        display: flex;
        position: absolute;
        top: 40px;
        top: min(40px, 40 * var(--ratio-calc-sp));
        left: 30px;
        left: min(30px, 30 * var(--ratio-calc-sp));
        height: 78px;
        height: min(78px, 78 * var(--ratio-calc-sp));
        width: 62px;
        width: min(62px, 62 * var(--ratio-calc-sp));
        justify-content: center;
        align-items: center;
        z-index: 90;
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        width: 62px;
        width: min(62px, 62 * var(--ratio-calc-sp));
        height: 3.5px;
        height: min(3.5px, 3.5 * var(--ratio-calc-sp));
        background-color: #231815;
        position: absolute;
    }
    .menu-btn span:before {
        bottom: 15px;
        bottom: min(15px, 15 * var(--ratio-calc-sp));
    }
    .menu-btn span:after {
        top: 15px;
        top: min(15px, 15 * var(--ratio-calc-sp));
    }
    #menu-btn-check{
        display: none;
    }
    #menu-btn-check:checked ~ .menu-btn {
        width: 50px;
        width: min(50px, 50 * var(--ratio-calc-sp));
        height: 50px;
        height: min(50px, 50 * var(--ratio-calc-sp));
        left: 85vw;
        border: 0.5px solid var(--text-color);
        border-radius: 50%;
    }
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        width: 25px;
        width: min(25px, 25 * var(--ratio-calc-sp));
        height: 0.5px;
        left: 2.9vw;
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        width: 25px;
        width: min(25px, 25 * var(--ratio-calc-sp));
        height: 0.5px;
        left: 2.9vw;
        top: 1px;
        top: min(1.5px, 1.5 * var(--ratio-calc-sp));
        transform: rotate(-45deg);
    }
    .menu-sp{
        position: fixed;
        top: 0;
        left: 100%;
        margin: 0 0;
        width: 100vw;
        z-index: 50;
        background: #DADEE1;
        text-align: left;

        padding-top: 104px;
        padding-top: min(104px, 104 * var(--ratio-calc-sp));
        padding-bottom: 57px;
        padding-bottom: min(57px, 57 * var(--ratio-calc-sp));
        padding-left: 60px;
        padding-left: min(60px, 60 * var(--ratio-calc-sp));
    }
    .menu-sp li{
        font-size: 30px;
        font-size: min(30px, 30 * var(--ratio-calc-sp));
        line-height: 2.27;
        list-style-type: none;
    }
    .menu-sp li::before{
        display: inline-block;
        position: relative;
        content: '';
        top: -7px;
        top: min(-7px, -7 * var(--ratio-calc-sp));
        margin-right: 18px;
        margin-right: min(18px, 18 * var(--ratio-calc-sp));
        width: 28.76px;
        width: min(28.76px, 28.76 * var(--ratio-calc-sp));
        border-top: 0.65px solid #262626;
    }
    header nav img{
        display: block;
        position: relative;
        margin-top: 52.8px;
        margin-top: min(52.8px, 52.8 * var(--ratio-calc-sp));
        width: 33.34px;
        width: min(33.34px, 33.34 * var(--ratio-calc-sp));
    }
    #menu-btn-check:checked ~ .menu-sp {
        left: 0;
    }
    .top-link{
        display: flex;
        position: fixed;
        top: 98vh;
        left: 85vw;
        width: 11.5vw;
        height: 11.5vw;
        border-radius: 50%;
        background: #FFF;
        border: 0.4px solid var(--text-color);
        text-align: center;
        z-index: 100;
    }

    header{
        position: relative;
        width: 100vw;
        height: 161px;
        height: min(161px, 161 * var(--ratio-calc-sp));
        margin: 0 auto;
    }
    header .company{
        width: 410px;
        margin-left: min(140px, 140 * var(--ratio-calc-sp));
        padding-top: 30px;
        padding-top: min(30px, 30 * var(--ratio-calc-sp));
    }
    header .company .copy{
        margin-bottom: min(15px, 15 * var(--ratio-calc-sp));
        font-size: min(21px, 21 * var(--ratio-calc-sp));
    }
    header .company .company-type{
        font-size: min(22.7px, 22.7 * var(--ratio-calc-sp));
    }
    header .company .company-name{
        margin-left: min(13.8px, 13.8 * var(--ratio-calc-sp));
        font-size: min(55px, 55 * var(--ratio-calc-sp));
    }
    header nav .menu-sp .company .copy{
        display: block;
        text-align: left;
    }
    header nav .menu-sp .company .company-type{
        margin-right: 12.6px;
        margin-right: min(12.6px, 12.6 * var(--ratio-calc-sp));
    }
    header nav .menu-sp .company .company-name{
        margin-left: 0;
        margin-right: 0;
    }

    .head .head-message-box{
        top: 150px;
        top: min(150px, 150 * var(--ratio-calc-sp));
        right: 48px;
        right: min(48px, 48 * var(--ratio-calc-sp));
        min-width: min(230px, 230 * var(--ratio-calc-sp));
    }
    .head .head-message1{
        font-size: 40px;
        font-size: min(40px, 40 * var(--ratio-calc-sp));
    }
    .head-message1::after{
        top: 20px;
        top: min(20px, 20 * var(--ratio-calc-sp));
    }
    .head .head-message2{
        margin-top: 35px;
        margin-top: min(35px, 35 * var(--ratio-calc-sp));
        font-size: 14.5px;
        font-size: min(14.5px, 14.5 * var(--ratio-calc-sp));
    }
    main{
        width: 100vw;
    }
}

footer{
    z-index: 10;
    display: block;
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 1920px;
    background-color: #2E2E2E;
    color: #FFF;
}
footer a{
    color: #FFF;
    text-decoration: none;
}
footer a:hover{
    color: #FFF;
}
footer .company{
    display: inline-block;
    position: relative;
    width: 500px;
    margin-left: 100.4px;
    padding-top: 101.5px;
    text-align: left;
}
footer .company .copy{
    margin-bottom: 19.5px;
    letter-spacing: 0.2em;
    font-size: 16.7px;
}
footer .company .company-type{
    display: inline-block;
    line-height: 1.2;
    font-size: 18px;
}
footer .company .company-name{
    display: inline-block;
    margin-left: 13.8px;
    line-height: 1.0;
    font-family: var(--font-family-marugo-bold);
    font-size: 43.7px;
    font-weight: bold;
}
footer .company .company-info{
    margin-top: 41.8px;
    margin-bottom: 115.2px;
    font-size: 19.6px;
    line-height: 1.7;
}
footer .contents{
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-top: 110.7px;
    margin-left: 740px;
    text-align: right;
}
footer .contents p{
    display: inline-block;
    margin-left: 40px;
    font-size: 20.9px;
}
footer .contents .contact{
    display: block;
    position: relative;
    width: 160px;
    margin: 43.9px 0 44.7px auto;
    padding: 11.3px 20px 12.7px 19.4px;
    font-size: 18px;
    border: 0.25px solid #FFF;
}
footer .contents .contact img{
    display: inline-block;
    width: 32px;
    margin-left: 15.1px;
}
footer .contents .copyright{
    font-size: 17px;
}
@media screen and (max-width:640px){
    footer{
        width: 100vw;
    }
    footer .company{
        display: block;
        width: 100vw;
        margin-left: 92px;
        margin-left: min(92px, 92 * var(--ratio-calc-sp));
        padding-top: 42px;
        padding-top: min(42px, 42 * var(--ratio-calc-sp));
    }
    footer .company .copy{
        margin-bottom: 26.5px;
        margin-bottom: min(26.5px, 26.5 * var(--ratio-calc-sp));
        font-size: 23.2px;
        font-size: min(23.2px, 23.2 * var(--ratio-calc-sp));
    }
    footer .company .company-type{
        font-size: 25px;
        font-size: min(25px, 25 * var(--ratio-calc-sp));
    }
    footer .company .company-name{
        font-size: 60px;
        font-size: min(60px, 60 * var(--ratio-calc-sp));
    }
    footer .company .company-info{
        margin-top: 41.8px;
        margin-bottom: 115.2px;
        font-size: 19.6px;
        line-height: 1.7;

        margin-top: 33px;
        margin-top: min(33px, 33 * var(--ratio-calc-sp));
        margin-bottom: 30px;
        margin-bottom: min(30px, 30 * var(--ratio-calc-sp));
        font-size: min(19.6px, 19.6 * var(--ratio-calc-sp));
    }
    footer .contents{
        margin-top: 0;
        margin-left: 0;
        text-align: left;
    }
    footer .contents a{
        display: none;
    }
    footer .contents .contact{
        display: none;
    }
    footer .contents .copyright{
        margin-left: 95px;
        margin-left: min(95px, 95 * var(--ratio-calc-sp));
        margin-bottom: 36px;
        margin-bottom: min(36px, 36 * var(--ratio-calc-sp));
        font-size: min(17px, 17 * var(--ratio-calc-sp));
    }
}

/* トップページ */
.top header{
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, 0.6);
}
.top .head{
    margin-bottom: 100px;
}
.top-message1{
    display: inline;
    position: absolute;
    top: 923px;
    left: 101px;
    padding: 20px 20px;
    font-size: 59px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    background: #FFF;
}
.top-message2{
    display: inline;
    position: absolute;
    top: 1044px;
    left: 101px;
    padding: 20px 20px;
    font-size: 59px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    background: #FFF;
}
.top-message3{
    display: inline;
    position: absolute;
    top: 1163px;
    left: 101px;
    padding: 20px 20px;
    font-size: 25px;
    line-height: 1.48;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    background: #FFF;
}
.top .news-index{
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 74px 446px 70px;
    width: calc(1920px - 446px * 2);
    background: #DBDFE2;
    font-feature-settings: normal;
}
.top .news-index .title{
    display: inline-block;
    margin-bottom: 44.6px;
    font-size: 31.3px;
}
.top .news-index .title span{
    margin-left: 23.5px;
    font-size: 17px;
}
.top .news-index .title-list{
    padding-top: 10px;
    float: right;
}
.top .instagrum{
    padding: 143px 443.5px 0;
}
.top .instagrum .title{
    padding-bottom: 46px;
    text-align: center;
    font-size: 47px;
}
.top .instagrum img{
    height: 473px;
    object-fit: cover;
}
.top .ecbanner{
    display: block;
    position: relative;
    margin: 100px auto;
    width: 1719px;
}
.top .contents{
    display: block;
    position: relative;
    margin: 132px auto;
    width: 1720px;
    background: #E1E1DD;
    text-align: center;
}
.top .contents .intro{
    display: block;
    position: relative;
    padding: 120px 0 20px;
}
.top .contents .intro:last-child{
    padding-bottom: 120px;
}
.top .contents .intro .title{
    display: block;
    position: relative;
    margin-left: 95px;
    width: 551px;
    padding: 26.2px 0 30.7px 0;
    font-size: 54px;
    line-height: 1;
    background: #FFF;
    border: 0.5px solid var(--text-color);
    z-index: 3;
}
.top .contents .intro .title-char2{
    letter-spacing: 0.8em;
    text-indent: 0.8em;
}
.top .contents .intro .title-char4{
    letter-spacing: 0.4em;
    text-indent: 0.4em;
}
.top .contents .intro .title-head{
    position: absolute;
    top: 180px;
    left: 50px;
    width: 91px;
    border-top: 0.5px solid #231815;
    z-index: 4;
}
.top .contents .intro img{
    position: absolute;
    top: 170px;
    left: 125px;
    width: 1434px;
    z-index: 2;
}
.top .contents .intro .intro2-add1{
    top: 967px;
    left: 225px;
    width: 288px;
    z-index: 10;
}
.top .contents .intro .intro2-add2{
    top: 940px;
    left: 488px;
    width: 420px;
    z-index: 11;
}
.top .contents .intro .intro3-add1{
    top: 890px;
    left: 237px;
    width: 291px;
    z-index: 10;
}
.top .contents .intro .intro3-add2{
    top: 890px;
    left: 560px;
    width: 386px;
    z-index: 11;
}
.top .contents .intro .desc{
    display: block;
    position: relative;
    margin-left: 201px;
    width: 1442px;
    height: 972px;
    background: #FFF;
    z-index: 1;
}
.top .contents .intro .desc p{
    display: inline-block;
    position: relative;
    padding-top: 780px;
    text-align: left;
    font-size: 22px;
    line-height: 1.68;
}
.top .contents .intro .desc .intro1-desc{
    padding-left: 350px;
    letter-spacing: 0.12em;
}
.top .contents .intro .desc .intro2-desc,
.top .contents .intro .desc .intro3-desc{
    padding-left: 700px;
    letter-spacing: 0.12em;
}
.top .contents .intro .desc .intro4-desc{
    padding-top: 800px;
    padding-left: 490px;
    letter-spacing: 0.12em;
}
.top .contents .intro .desc .more-detail{
    display: block;
    padding-top: 20px;
    padding-right: 79px;
    text-align: right;
    font-size: 21px;
    line-height: 1;
    letter-spacing: 0.2em;
}
.top .contents .intro .desc .more-detail::before{
    display: inline-block;
    position: relative;
    top: -7px;
    margin-right: 10px;
    content: '';
    border-top: 0.65px solid #262626;
    width: 136px;
}
@media screen and (max-width:640px){
    /* トップページ */
    .top .head{
        margin-bottom: 40px;
        margin-bottom: min(40px, 40 * var(--ratio-calc-sp));
    }
    .top-message1{
        top: 253px;
        top: min(253px, 253 * var(--ratio-calc-sp));
        left: 32px;
        left: min(32px, 32 * var(--ratio-calc-sp));
        padding: min(10px, 10 * var(--ratio-calc-sp)) min(10px, 10 * var(--ratio-calc-sp));
        font-size: 28px;
        font-size: min(28px, 28 * var(--ratio-calc-sp));
    }
    .top-message2{
        top: 310px;
        top: min(310px, 310 * var(--ratio-calc-sp));
        left: 32px;
        left: min(32px, 32 * var(--ratio-calc-sp));
        padding: min(10px, 10 * var(--ratio-calc-sp)) min(10px, 10 * var(--ratio-calc-sp));
        font-size: 28px;
        font-size: min(28px, 28 * var(--ratio-calc-sp));
    }
    .top-message3{
        top: 365px;
        top: min(365px, 365 * var(--ratio-calc-sp));
        left: 32px;
        left: min(32px, 32 * var(--ratio-calc-sp));
        padding: min(10px, 10 * var(--ratio-calc-sp)) min(10px, 10 * var(--ratio-calc-sp));
        font-size: 12px;
        font-size: min(12px, 12 * var(--ratio-calc-sp));
    }
    .top .news-index{
        padding: 35px 29px 50px;
        padding: min(35px, 35 * var(--ratio-calc-sp)) min(29px, 29 * var(--ratio-calc-sp)) min(50px, 50 * var(--ratio-calc-sp));
        width: auto;
    }
    .top .news-index .title{
        margin-bottom: min(44.6px, 44.6 * var(--ratio-calc-sp));
        font-size: min(31.3px, 31.3 * var(--ratio-calc-sp));
    }
    .top .news-index .title span{
        margin-bottom: min(23.5px, 23.5 * var(--ratio-calc-sp));
        font-size: min(17px, 17 * var(--ratio-calc-sp));
    }
    .top .news-index .title-list{
        padding-top: min(10px, 10 * var(--ratio-calc-sp));
    }
    .top .instagrum{
        padding: 52px 82px 0;
        padding: min(52px, 52 * var(--ratio-calc-sp)) min(82px, 82 * var(--ratio-calc-sp)) 0;
    }
    .top .instagrum .uk-position-small{
        margin: min(15px, 15 * var(--ratio-calc-sp));
    }
    .top .instagrum .uk-position-center-left{
        left: -50px;
        left: min(-50px, -50 * var(--ratio-calc-sp));
    }
    .top .instagrum .uk-position-center-right{
        right: -50px;
        right: min(-50px, -50 * var(--ratio-calc-sp));
    }
    .top .instagrum .title{
        padding-bottom: 20px;
        padding-bottom: min(20px, 20 * var(--ratio-calc-sp));
        font-size: min(47px, 47 * var(--ratio-calc-sp));
    }
    .top .instagrum img{
        height: 163px;
        height: min(163px, 163 * var(--ratio-calc-sp));
    }
    .uk-slider-items > *{
        max-width: 33.3%;
    }
    .top .ecbanner{
        margin: 34px auto;
        margin: min(34px, 34 * var(--ratio-calc-sp)) auto;
        width: 100vw;
    }
    .top .contents{
        margin: 34px auto;
        margin: min(34px, 34 * var(--ratio-calc-sp)) auto;
        width: 100vw;
    }
    .top .contents .intro{
        padding-top: calc(120 * var(--ratio-calc));
        padding-bottom: calc(20 * var(--ratio-calc));
    }
    .top .contents .intro:last-child{
        padding-bottom: calc(120 * var(--ratio-calc));
    }
    .top .contents .intro .title{
        margin-left: calc(95 * var(--ratio-calc));
        width: calc(551 * var(--ratio-calc));
        padding-top: calc(26.2 * var(--ratio-calc));
        padding-bottom: calc(30.7 * var(--ratio-calc));
        font-size: calc(54 * var(--ratio-calc));
    }
    .top .contents .intro .title-head{
        top: calc(180 * var(--ratio-calc));
        left: calc(50 * var(--ratio-calc));
        width: calc(91 * var(--ratio-calc));
    }
    .top .contents .intro img{
        top: calc(170 * var(--ratio-calc));
        left: calc(125 * var(--ratio-calc));
        width: calc(calc(1434 + 80) * var(--ratio-calc));
    }
    .top .contents .intro .intro2-add1{
        top: calc(calc(967 + 80) * var(--ratio-calc));
        left: calc(225 * var(--ratio-calc));
        width: calc(288 * var(--ratio-calc));
    }
    .top .contents .intro .intro2-add2{
        top: calc(calc(940 + 80) * var(--ratio-calc));
        left: calc(488 * var(--ratio-calc));
        width: calc(420 * var(--ratio-calc));
    }
    .top .contents .intro .intro3-add1{
        top: calc(calc(890 + 80) * var(--ratio-calc));
        left: calc(237 * var(--ratio-calc));
        width: calc(291 * var(--ratio-calc));
    }
    .top .contents .intro .intro3-add2{
        top: calc(calc(890 + 80) * var(--ratio-calc));
        left: calc(560 * var(--ratio-calc));
        width: calc(386 * var(--ratio-calc));
    }
    .top .contents .intro .desc{
        margin-left: calc(201 * var(--ratio-calc));
        width: calc(calc(1442 + 80) * var(--ratio-calc));
        height: calc(calc(972 + 80) * var(--ratio-calc));
    }
    .top .contents .intro .desc p{
        padding-top: calc(calc(780 + 80) * var(--ratio-calc));
        font-size: calc(22 * var(--ratio-calc));
    }
    .top .contents .intro .desc .intro1-desc{
        padding-left: calc(350 * var(--ratio-calc));
    }
    .top .contents .intro .desc .intro2-desc,
    .top .contents .intro .desc .intro3-desc{
        padding-left: calc(700 * var(--ratio-calc));
    }
    .top .contents .intro .desc .intro4-desc{
        padding-top: calc(calc(800 + 80) * var(--ratio-calc));
        padding-left: calc(500 * var(--ratio-calc));
    }
    .top .contents .intro .desc .more-detail{
        padding-top: calc(20 * var(--ratio-calc));
        padding-left: calc(79 * var(--ratio-calc));
        font-size: calc(21 * var(--ratio-calc));
    }
    .top .contents .intro .desc .more-detail::before{
        top: calc(-7 * var(--ratio-calc));
        margin-left: calc(10 * var(--ratio-calc));
        width: calc(136 * var(--ratio-calc));
    }
}

/* 大倉塗料産業とは */
.about .aboutus{
    display: block;
    position: relative;
    margin: 167px auto;
    width: 1720px;
    background: #E1E1DD;
    text-align: left;
}
.about section .title{
    display: inline-block;
    position: relative;
    margin: 116px auto 93px 120px;
    font-size: 70px;
    letter-spacing: 0.2em;
}
.about section .title::after{
    position: absolute;
    content: '';
    background-color: #666666;
    width: 120px;
    height: 3px;
    bottom: -40px;
    left: 0;
}
.about section div{
    display: inline-block;
    position: relative;
    margin: 0 auto 120px 120px;
    width: calc(1479px - 200px);
    background: #FFF;
}
.about .aboutus div{
    width: 1479px;
}
.about .aboutus .message{
    overflow: hidden;
}
.about .aboutus .message .summary{
    display: inline-block;
    position: relative;
    margin: 85px 96px 69px 100px;    
    font-size: 50px;
    line-height: 1.74;
    letter-spacing: 0.13em;
}
.about .aboutus .message .detail{
    margin: 0 95px 87px 100px;
    width: 1284px;
    font-size: 31px;
    line-height: 1.7;
    letter-spacing: 0.06em;
    text-align: justify;
}
.about .aboutus .message .space{
    float: right;
    width: 1px;
    height: 100px;
}
.about .aboutus .message .signature{
    float: right;
    margin: 0 0;
    width: 49%;
    clear: both;
}
.about .aboutus .message img{
    display: block;
    position: relative;
    float: left;
    margin-left: 62px;
    width: 270px;
}
.about .aboutus .message .name{
    float: left;
    display: block;
    margin-top: 140px;
    margin-left: 33px;
    font-size: 55px;
    line-height: 1;
}
.about .aboutus .message p span{
    font-size: 27px;
    line-height: 2.5;
}
.about .company{
    display: block;
    position: relative;
    margin: 167px auto;
    width: 1720px;
    background: #E1E1DD;
    text-align: left;
}
.about .company .info{
    padding: 106px 99px;
}
.about .company .info table{
    width: 100%;
}
.about .company .info table tr td{
    height: 120px;    
    border-top: 0.5px solid #4D4D4D;
}
.about .company .info table tr td:first-child{
    width: 383.5px;
    padding-left: 50px;
    font-family: var(--font-family-marugo-bold);
    font-size: 28px;
    line-height: 1;
}
.about .company .info table tr td:last-child{
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.06em;
}
.about .company .info table tr:last-child td{
    border-bottom: 0.5px solid #4D4D4D;
}
.about .company .info iframe{
    margin-top: 90px;
    width: 100%;
    height: 798px;
}
.about .company .history{
    padding: 106px 99px;
}
.about .company .history table{
    width: 100%;
}
.about .company .history table tr td{
    padding: 42px 0;
    min-height: 120px;    
    border-top: 0.5px solid #4D4D4D;
}
.about .company .history table tr td:first-child{
    width: 383.5px;
    padding-top: 62px;
    padding-left: 50px;
    font-family: var(--font-family-marugo-bold);
    font-size: 27px;
    line-height: 1;
    vertical-align: top;
}
.about .company .history table tr td:last-child{
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: 0.06em;
}
.about .company .history table tr:last-child td{
    border-bottom: 0.5px solid #4D4D4D;
}
@media screen and (max-width:640px){
    /* 大倉塗料産業とは */
    .about .aboutus{
        margin: calc(160 * var(--ratio-calc)) auto;
        width: 100vw;
        padding: calc(120 * var(--ratio-calc)) 0;
    }
    .about section .title{
        margin: 5vw auto 5vw 5vw;
        font-size: calc(70 * var(--ratio-calc-sp));
        letter-spacing: 0.1em;
    }
    .about section .title::after{
        width: calc(120 * var(--ratio-calc-sp));
        bottom: -20px;
    }
    .about section div{
        margin: 0 6vw;
        margin-top: calc(50 * var(--ratio-calc-sp));
        width: 88vw;
    }
    .about .aboutus div{
        width: 88vw;
    }
    .about .aboutus .message .summary{
        margin: 5vw 5vw;
        font-size: calc(40 * var(--ratio-calc-sp));
        line-height: 1.5;
    }
    .about .aboutus .message .detail{
        margin: 5vw 5vw;
        font-size: calc(31 * var(--ratio-calc-sp));
        line-height: 1.3;
        width: 78vw;
    }
    .about .aboutus .message .space{
        margin: 0 0;
        height: 120vw;
    }
    .about .aboutus .message .signature{
        margin: 0 0;
        width: 78vw;
    }
    .about .aboutus .message img{
        margin-left: 0;
        margin-bottom: 5vw;
        width: 30vw;
    }
    .about .aboutus .message .name{
        margin: 13vw 5vw 0 3vw;
        font-size: calc(55 * var(--ratio-calc-sp));
    }
    .about .aboutus .message p span{
        font-size: calc(27 * var(--ratio-calc-sp));
    }
    .about .company{
        margin: calc(160 * var(--ratio-calc)) auto;
        width: 100vw;
        padding: calc(120 * var(--ratio-calc)) 0;
    }
    .about .company .info{
        padding: 5vw 5vw;
        width: 78vw;
    }
    .about .company .info table{
        width: 78vw;
    }
    .about .company .info table tr td{
        display: block;
        height: auto;
        margin: 3vw auto;
        padding-top: 3vw;
    }
    .about .company .info table tr td:first-child{
        width: 100%;
        padding-left: 0;
        font-size: calc(28 * var(--ratio-calc-sp));
        text-align: center;
    }
    .about .company .info table tr td:last-child{
        font-size: calc(32 * var(--ratio-calc-sp));
        line-height: 1.3;
    }
    .about .company .info table tr:last-child td{
        border-bottom: none;
    }
    .about .company .info table tr:last-child td:last-child{
        border-bottom: 0.5px solid #4D4D4D;
        padding-bottom: 6vw;
    }
    .about .company .info iframe{
        margin-top: 10vw;
        width: 78vw;
        height: 50vh;
    }
    .about .company .history{
        padding: 5vw 5vw;
        width: 78vw;
    }
    .about .company .history table{
        width: 78vw;
    }
    .about .company .history table tr td{
        display: block;
        min-height: auto;
        height: auto;
        padding: 3vw 0;
    }
    .about .company .history table tr td:first-child{
        width: 100%;
        padding-top: 3vw;
        padding-left: 0;
        font-size: calc(27 * var(--ratio-calc-sp));
        text-align: center;
    }
    .about .company .history table tr td:last-child{
        font-size: calc(32 * var(--ratio-calc-sp));
    }
    .about .company .history table tr:last-child td{
        border-bottom: none;
    }
    .about .company .history table tr:last-child td:last-child{
        border-bottom: 0.5px solid #4D4D4D;
        padding-bottom: 6vw;
    }
}

/* 製品 */
.product .contents{
    display: block;
    position: relative;
    margin: 167px auto;
    width: 1720px;
    background: #E1E1DD;
    text-align: left;
}
.product .contents div{
    display: inline-block;
    position: relative;
    margin-top: 120px;
    margin-left: 120px;
    width: 702px;
    border-radius: 15px;
    background: #FFF;
}
.product .contents div:nth-child(even){
    margin-left: 75px;
    margin-bottom: 53px;
}
.product .contents div:last-child{
    margin-bottom: 120px;
}
.product .contents div .number{
    margin: 48px auto 44px 61px;
    font-size: 25px;
    line-height: 1;
}
.product .contents div .number span{
    font-family: var(--font-family-marugo-bold);
    font-weight: bold;
}
.product .contents div .title{
    margin: 44px auto 81px 61px;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.1em;
}
@media screen and (max-width:640px){
    .product .contents{
        margin: calc(160 * var(--ratio-calc)) auto;
        width: 100vw;
        padding: calc(120 * var(--ratio-calc)) 0;
    }
    .product .contents div{
        display: block;
        margin: 0 8vw;
        margin-bottom: calc(120 * var(--ratio-calc));
        width: 84vw;
    }
    .product .contents div:nth-child(even){
        margin: 0 8vw;
        margin-bottom: calc(120 * var(--ratio-calc));
    }
    .product .contents div:last-child{
        margin-bottom: calc(120 * var(--ratio-calc));
    }
    .product .contents div .number{
        margin: 10vw auto 0 10vw;
        /* font-size: 25px; */
    }
    .product .contents div .title{
        margin: 10vw auto 0 10vw;
        padding-bottom: 15vw;
        /* font-size: 36px; */
    }
}

/* 設備 */
.facility .contents{
    display: block;
    position: relative;
    margin: 167px auto;
    width: 1720px;
    background: #E1E1DD;
    text-align: left;
}
.facility .contents div{
    display: inline-block;
    position: relative;
    margin-top: 120px;
    margin-left: 120px;
    width: 1479px;
    border-radius: 15px;
    background: #FFF;
}
.facility .contents div:last-child{
    margin-bottom: 122px;
}
.facility .contents .facility-t1 img{
    display: inline-block;
    margin: 0 0;
    width: 723px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.facility .contents .facility-t1 .desc-t1{
    display: inline-block;
    margin: 0 0;
    padding-left: 103px;
    width: 40%;
    vertical-align: top;
}
.facility .contents .facility-t2 img{
    display: inline-block;
    margin: 0 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.facility .contents .facility-t2 .desc-t2{
    display: inline-block;
    margin: 0 0;
    padding-left: 103px;
    width: calc(1479px - 103px);
    vertical-align: top;
}
.facility .contents .facility-t2 .desc-t2-left{
    margin: 0 0;
    width: 40%;
}
.facility .contents .facility-t2 .desc-t2-right{
    float: right;
    margin: 0 0;
    width: 50%;
}
.facility .contents .facility-t3 img:nth-child(1){
    display: inline-block;
    margin: 0 0;
    width: 742.5px;
    border-top-left-radius: 15px;
    vertical-align: top;
}
.facility .contents .facility-t3 img:nth-child(2){
    display: inline-block;
    margin: 0 0;
    width: 736.5px;
    border-top-right-radius: 15px;
    vertical-align: top;
}
.facility .contents .facility-t3 .desc-t3{
    display: inline-block;
    margin: 0 0;
    padding-left: 126px;
    padding-bottom: 50px;
    width: calc(1479px - 126px);
    vertical-align: top;
}
.facility .contents .title{
    margin-top: 64px;
    font-size: 25px;
    line-height: 1;
}
.facility .contents .title span{
    font-family: var(--font-family-marugo-bold);
    font-weight: bold;
}
.facility .contents .name{
    margin-top: 26.8px;
    font-size: 50px;
    line-height: 1.36;
    letter-spacing: 0.1em;
}
.facility .contents .type{
    margin-top: 31.2px;
    font-size: 25px;
    line-height: 1.6;
    letter-spacing: 0.1em;
}
.facility .contents .desc{
    margin-top: 54.4px;
    font-size: 22px;
    line-height: 1.72;
    letter-spacing: 0.1em;
}
.facility .contents .desc-no-type{
    margin-top: 157.4px;
    font-size: 22px;
    line-height: 1.72;
    letter-spacing: 0.1em;
}
.facility .contents .desc-t2 .title{
    margin-top: 61px;
}
.facility .contents .desc-t2-left:first-child .desc{
    margin: 0 0;
}
.facility .contents .desc-t2-left:last-child .desc{
    margin-bottom: 65.2px;
}
.facility .contents .desc-t2-right .desc{
    width: 558px;
    margin-top: 95.4px;
}
.facility .contents .desc-t3 .name{
    display: inline-block;
    width: 300px;
}
.facility .contents .desc-t3 .type{
    display: inline-block;
    width: 0;
}
.facility .contents .desc-t3 .desc{
    display: inline-block;
    margin-top: 0;
    margin-left: 80px;
    width: 870px;
    vertical-align: bottom;
}
@media screen and (max-width:640px){
    /* 設備 */
    .facility .contents{
        margin: calc(167 * var(--ratio-calc)) auto;
        width: 100vw;
    }
    .facility .contents div{
        margin: 0 6vw;
        margin-top: calc(50 * var(--ratio-calc-sp));
        width: 88vw;
    }
    .facility .contents div:last-child{
        margin-bottom: calc(122 * var(--ratio-calc-sp));
    }
    .facility .contents .facility-t1 img{
        width: 100%;
        border-radius: 15px;
    }
    .facility .contents .facility-t1 .desc-t1{
        padding-left: 6vw;
        width: 82vw;
    }
    .facility .contents .facility-t2 img{
        width: 100%;
        border-radius: 15px;
    }
    .facility .contents .facility-t2 .desc-t2{
        padding-left: 6vw;
        width: 82vw;
    }
    .facility .contents .facility-t2 .desc-t2-left{
        width: 82vw;
    }
    .facility .contents .facility-t2 .desc-t2-right{
        float: none;
        width: 82vw;
    }
    .facility .contents .facility-t3 img:nth-child(1){
        width: 100%;
        border-radius: 15px;
    }
    .facility .contents .facility-t3 img:nth-child(2){
        width: 100%;
        border-radius: 15px;
    }
    .facility .contents .facility-t3 .desc-t3{
        padding-left: 6vw;
        padding-bottom: 4vw;
        width: 82vw;
    }
    .facility .contents .title{
        margin-top: 8vw;
        font-size: calc(40 * var(--ratio-calc-sp));
    }
    .facility .contents .name{
        margin-top: 4vw;
        font-size: calc(60 * var(--ratio-calc-sp));
    }
    .facility .contents .type{
        margin-top: 4vw;
        font-size: calc(30 * var(--ratio-calc-sp));
    }
    .facility .contents .desc{
        margin-top: 4vw;
        margin-bottom: 4vw;
        font-size: calc(25 * var(--ratio-calc-sp));
        width: 74vw;
        text-align: justify;
    }
    .facility .contents .desc-no-type{
        margin-top: 4vw;
        margin-bottom: 4vw;
        width: 74vw;
        font-size: calc(25 * var(--ratio-calc-sp));
    }
    .facility .contents .desc-t2 .title{
        margin-top: 8vw;
    }
    .facility .contents .desc-t2-left:last-child .desc{
        margin-bottom: 4vw;
    }
    .facility .contents .desc-t2-right .desc{
        margin-top: 4vw;
        width: 74vw;
    }
    .facility .contents .desc-t3 .name{
        margin-top: 4vw;
        width: 74vw;
    }
    .facility .contents .desc-t3 .desc{
        margin-top: 4vw;
        margin-left: 0;
        width: 74vw;
    }
}

/* news-index */
.news-index{
    position: relative;
    width: 1300px;
    margin: 0 auto;
    margin-top: 50px;
}
.news-index ul{
	margin: 30px 0;
    margin: 0 0;
	padding: 0 0;
    font-size: 18px;
}
.news-index ul li{
	margin: 0;
    padding: 5px 0;
    padding: 24px 0 28px 0;
	border-bottom: 0.5px solid #404040;
	line-height: 1;
	list-style-type: none;
}
.news-index ul li:first-child{
	border-top: 0.5px solid #404040;
}
.news-index .up_ymd{
    padding-left: 27px;
}
.news-index .newsTitle{
	padding-left: 49px;
    font-size: 23px;
}
/* news */
.news section{
    display: block;
    position: relative;
    margin: 122px auto;
    padding: 116px 0 120px;
    width: 1719px;
    background: #DEDEDA;
    font-feature-settings: normal;
}
.news section .title{
    display: inline-block;
    position: relative;
    margin: 116px auto 93px 120px;
    margin: 0 auto 93px 120px;
    font-size: 70px;
    letter-spacing: 0.2em;
}
.news section .title::after{
    position: absolute;
    content: '';
    background-color: #666666;
    width: 120px;
    height: 3px;
    bottom: -40px;
    left: 0;
}
.news section div{
    display: block;
    position: relative;
    margin: 0 auto;
    width: 1479px;
    background: #FFF;
    border-radius: 10px;
}
.news ul{
    margin: 0 100px;
	padding: 0 0;
    font-size: 18px;
}
.news ul li{
	margin: 0;
    padding: 5px 0;
    padding: 24px 0 28px 0;
	border-top: 0.5px solid #4D4D4D;
	line-height: 1;
	list-style-type: none;
}
.news ul li:last-child{
    padding-bottom: 50px;
}
.news .up_ymd{
    padding-left: 50px;
}
.news .newsTitle{
	padding-left: 165px;
    font-size: 35px;
}
.news pre{
    font-size: 24px;
}
.news .pager{
    margin: 0 0;
    margin-right: 100px;
    padding: 50px 0;
	clear:both;
	text-align:right;
    font-size: 25px;
}
/* ページャーボタン */
.news .pager a{
    padding: 12px 14px;
	margin: 0 8px;
    border: 1px solid #eae9e8;
	border-radius: 3px;
    color: #333;
    text-decoration: none;
}
.news .pager .btnPrev,
.news .pager .btnNext{
    padding: 12px 26px;
    background: #C7C7C7;
    color: var(--text-color);
}
/* 現在のページのボタン */
.news .pager a.current{
    padding: 12px 14px;
	margin: 0 8px;
	background: #4D4D4D;
	border-radius: 3px;
    color: #fff;
    text-decoration: none;
}
.news .pager a:hover{
	background: #4D4D4D;
    color: #fff;
}
.news .overPagerPattern{
	padding: 0 2px ;	
}

/* news-detail */
.news .up_ymd_detail{
	display:inline-block;
	position: relative;
    margin:61px 860px 53px 150px;
    width: 169px;
    font-size: 28px;
}
.news .backBtn{
    display: inline-block;
    position: relative;
    margin: 0 0 0 auto;
    padding: 50px 0;
    padding-right: 100px;
    width: 182px;
	text-align:right;
    font-size: 25px;
}
.news .backBtn a{
	display:inline-block;
	padding:9px 0;
	width: 182px;
	background-color:#C7C7C7;
    color: var(--text-color);
	text-decoration:none;
    font-size: 25px;
    text-align: center;
}
.news .detailTitle{
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 62px 0 60px 50px;
    width: 1230px;
    font-size: 35px;
    border-top: 0.5px solid #4D4D4D;
    border-radius: 0;
}
.news .detail{
    padding-bottom: 60px;
    font-size: 35px;
    line-height: 1.7;
}
.news .detailText{
    margin: 0 auto;
    width: 1180px;
}
.news .detailText div{
    width: auto;
}
.news .detailUpfile{
    margin: 30px auto;
	text-align:center;
}
.news .detailUpfile img{
	max-width:80%;
    margin: 0 auto;
    text-align: center;
}
@media screen and (max-width:640px){
    /* news-index */
    .news-index{
        width: auto;
        margin-top: min(50px, 50 * var(--ratio-calc-sp));
    }
    .news-index ul{
        font-size: min(18px, 18 * var(--ratio-calc-sp));
    }
    .news-index ul li{
        padding: min(24px, 24 * var(--ratio-calc-sp)) 0 min(28px, 28 * var(--ratio-calc-sp)) 0;
    }
    .news-index .up_ymd{
        padding-left: min(27px, 27 * var(--ratio-calc-sp));
    }
    .news-index .newsTitle{
        padding-left: min(49px, 49 * var(--ratio-calc-sp));
        font-size: min(23px, 23 * var(--ratio-calc-sp));
    }
    /* news */    
    .news section{
        margin: calc(160 * var(--ratio-calc)) auto;
        width: 100vw;
        padding: calc(120 * var(--ratio-calc)) 0;
    }
    .news section .title{
        margin: 5vw auto 5vw 5vw;
        font-size: calc(70 * var(--ratio-calc-sp));
        letter-spacing: 0.1em;
    }
    .news section .title::after{
        width: calc(120 * var(--ratio-calc-sp));
        bottom: -20px;
    }
    .news section div{
        margin: 0 6vw;
        margin-top: calc(50 * var(--ratio-calc-sp));
        width: 88vw;
    }
    .news ul{
        margin: 0 4vw;
        font-size: min(18px, 18 * var(--ratio-calc-sp));
    }
    .news ul li{
        padding: min(24px, 24 * var(--ratio-calc-sp)) 0;
    }
    .news ul li:last-child{
        padding-bottom: 30px;
        padding-bottom: min(30px, 30 * var(--ratio-calc-sp));
    }
    .news .up_ymd{
        padding-left: 12px;
        padding-left: min(12px, 12 * var(--ratio-calc-sp));
    }
    .news .newsTitle{
	    padding-left: 40px;
        padding-left: min(40px, 40 * var(--ratio-calc-sp));
        font-size: 25px;
        font-size: min(25px, 25 * var(--ratio-calc-sp));
    }
    .news .pager{
        margin-right: 2vw;
        padding: min(50px, 50 * var(--ratio-calc-sp)) 0;
        font-size: min(25px, 25 * var(--ratio-calc-sp));
    }
    /* ページャーボタン */
    .news .pager a{
        padding: min(12px, 12 * var(--ratio-calc-sp)) min(14px, 14 * var(--ratio-calc-sp));
        margin: 0 min(8px, 8 * var(--ratio-calc-sp));
    }
    .news .pager .btnPrev,
    .news .pager .btnNext{
        padding: min(12px, 12 * var(--ratio-calc-sp)) min(26px, 26 * var(--ratio-calc-sp));
    }
    /* 現在のページのボタン */
    .news .pager a.current{
        padding: min(12px, 12 * var(--ratio-calc-sp)) min(14px, 14 * var(--ratio-calc-sp));
        margin: 0 min(8px, 8 * var(--ratio-calc-sp));
    }
    .news .overPagerPattern{
        padding: 0 min(2px, 2 * var(--ratio-calc-sp));
    }

    /* news-detail */
    .news .up_ymd_detail{
        margin: 4vw;
        width: 53vw;
        font-size: min(28px, 28 * var(--ratio-calc-sp));
    }
    .news .backBtn{
        padding: min(50px, 50 * var(--ratio-calc-sp)) 0;
        padding-right: 2vw;
        padding-bottom: 0;
        width: auto;
        font-size: min(25px, 25 * var(--ratio-calc-sp));
    }
    .news .backBtn a{
	    padding: 9px;
        padding: min(9px, 9 * var(--ratio-calc-sp));
        width: auto;
        font-size: min(25px, 25 * var(--ratio-calc-sp));
    }
    .news .detailTitle{
        padding: 0;
        padding-top: 4vw;
        margin: 4vw;
        width: auto;
        font-size: min(35px, 35 * var(--ratio-calc-sp));
    }
    .news .detail{
        margin: 4vw;
        padding-bottom: 8vw;
        width: auto;
        font-size: 25px;
        font-size: min(25px, 25 * var(--ratio-calc-sp));
    }
    .news .detail div{
        width: auto;
    }
    .news .detailText{
        width: auto;
    }
    .news .detailUpfile{
        margin: 5vw 0 5vw;
    }
    .news .detailUpfile img{
        max-width: 60vw;
    }
}