@charset "UTF-8";
/* CSS Document */
word-break: break-all; word-wrap: break-word; overflow-wrap: break-word;

html {
    margin: 0;
    padding: 0;
}
html { scroll-behavior: smooth;}

body {
    padding: 0;
    margin: 0;
}

.wrap {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
}


/*---------------
common
---------------*/
h1 {
    margin: 0;
}
h2,p {
    text-align: center;
    font-family: heisei-maru-gothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;      
}

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

.container,.houhou,#blue,#orange {
    margin-bottom: 100px;
}

.btn-blue,.btn-orange {
    width: 100%;
    max-width: 350px;
    margin-top: 20px;
}
.btn-hotel,.btn-new {
    width: 100%;
    max-width: 250px;
}
.btn-hotel:hover ,.btn-new:hover ,.btn-blue:hover ,.btn-orange:hover ,.btn-yoyaku:hover {
    transform:scale(1.05,1.05);
}

section {
    text-align: center;
}
section .btn {
    margin: 40px 0;
}

.step {
    width: 100%;
    max-width: 600px;
    display: flex;
    align-items: center;
}
.step p {
    margin: 0;
    font-size: 1.2rem;
}
.step-icon {
    width: 100%;
    height: 100%;
    max-width: 70px;
    max-height: 70px;
    margin-right: 30px;
}
.borderline {
    margin: 30px 25px;
}

.step-span {
    text-align: left;
    max-width: 400px;
    margin: 20px auto;
}


/*---------------
トップ
---------------*/
.top {
    text-align: center;
}
.top img {
    width: 100%;
    max-width: 600px;
}



/*---------------
container
---------------*/
.container p {
    font-family: source-han-sans-cjk-ja, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 20px 0;
}
.container .ohitori {
    font-size: 1.7rem;
    font-weight: 600;
}
.container .ohitori span {
    color: #cc2727;
}
.setteibi,.taisyou,.setteibi-sp,.taisyou-sp,.sentyaku,.block,.block-sp  {
    width: 100%;
}
.setteibi {
    margin-top: 10px;
}
.setteibi,.taisyou {
    margin-bottom: 0;
}
.container .atention {
    font-size: 1.3rem;
    font-weight: 500;
    color: #1d2087;
    padding: 20px 60px;
    background-color: #fff0a1;
    border-radius: 15px;
}
.container .left-text {
    font-size: 1.1rem;
}
.block {
    margin: 20px 0;
}
.gimon {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
.gimon img {
    width: 100%;
    max-width: 280px;
}
.container .btn {
    text-align: center;
}

.btn-yoyaku {
    width: 100%;
    max-width: 400px;
}


/*---------------
ご利用方法
---------------*/
.houhou {
    border-top: 2px solid #d3d3d3;
    border-bottom: 2px solid #d3d3d3;
    padding: 30px 0 50px 0;
}
.houhou h2,.houhou p {
    color: #555555;
}
.houhou .btn {
    text-align: center;
    margin-top: 40px;
}


/*---------------
ご利用方法（お済みでない方）
---------------*/
#blue h2,#blue .blue {
    color: #00bcc1;
}
#blue .blue {
    margin-bottom: 50px;
    font-size: 1.1rem;
}
#blue .borderline {
    border-bottom: 2px solid #00bcc1;
}
.step-blue {
    width: 100%;
    max-width: 600px;
    margin-top: 20px;
}


/*---------------
ご利用方法（お済みの方）
---------------*/
#orange h2, .orange {
    color: #ff962e;
}
#orange .orange {
    margin-bottom: 50px;
    font-size: 1.1rem;
}
#orange .borderline {
    border-bottom: 2px solid #ff962e;
}



/*---------------
ロゴ
---------------*/
.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}
.logo img {
    width: 100%;
    height: 100%;
}
.logo .logo-tochigi {
    max-width: 200px;
}
.logo .logo-kinki {
    max-width: 285px;
}


/*---------------
お問い合わせ
---------------*/
.otoiawase {
    margin-top: 50px;
}
.otoiawase h2 {
    color: #555555;
}
.otoiawase p {
    font-family: source-han-sans-cjk-ja, sans-serif;
    font-weight: 400;
    font-style: normal;
}
.otoiawase .text {
    font-size: 1.4rem;;
    font-family: source-han-sans-cjk-ja, sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #00008b;
}
.otoiawase span {
    font-size: 1.4rem;
    color: #cc2727;
}
.otoiawase .left-text {
    padding: 0 30px;
}


/*---------------
コピーライト
---------------*/
.copyright {
    margin: 60px 0 30px 0;
}
.copyright p {
    font-size: 0.8rem;
    font-family: source-han-sans-cjk-ja, sans-serif;
    font-weight: 400;
    font-style: normal;
}


/*---------------------
	PCとスマホの切り替え
-----------------------*/
.block,.setteibi,.taisyou {}

.block-sp,.setteibi-sp,.taisyou-sp {
    display: none;
}


/*----------------------
レスポンシブ
----------------------*/
@media screen and (max-width:600px) {
    .gimon  img {
        max-width: 280px;
    }
    .logo {
        display: block;
        text-align: center;
    }
    .logo img {
        padding: 20px 0;
    }
}

@media screen and (max-width:540px) {
    .wrap {
        width: 90%;
        max-width: 600px;
        margin: 0 auto;
    }
    .gimon {
        display: block;
        text-align: center;
    }
    .gimon  img {
        max-width: 350px;
    }
    .houhou .btn {
        display: block;
        text-align: center;
        margin-top: 40px;
    }
    .btn-blue {
        margin-bottom: 20px;
    }
    .btn-hotel,.btn-new {
        max-width: 250px;
    }
    .otoiawase .text  {
        font-size: 1.0rem;
    }
    .otoiawase span {
        margin-top: 20px;
    }
    #orange .orange,#blue .blue {
        text-align: left;
    }
    .container .atention {
        font-size: 1.0rem;
    }
    .step-span {
        max-width: 300px;
        padding: 0 20px;
    }
}

@media screen and (max-width:460px) {
    h2 {
        font-size: 1.3rem;
    }
    .container .ohitori {
        font-size: 1.2rem;
    }
    .block-sp {
        margin-top: 25px;
    }
    .gimon img {
        margin-top: 10px;
    }
    .step-icon {
        width: 100%;
        height: 100%;
        max-width: 47px;
        max-height: 47px;
        margin-right: 15px;
    }
    .container,.houhou,#blue,#orange {
        margin-bottom: 50px;
    }
    .container .atention {
        padding: 20px;
        margin-bottom: 25px;
        text-align: left;
    }
    .container .left-text {
        font-size: 0.9rem;
        margin: 0 0 7px 0;
    }
    #blue .blue,#orange .orange {
        font-size: 0.9rem;
        padding: 0 20px;
    }
    #blue .step p,#orange .step p {
        font-size: 1.0rem;
    }
    #blue span,#orange span {
        font-size: 0.9rem;
    }
    .setteibi-sp,.taisyou-sp {
        margin-bottom: 20px;
    }
    .otoiawase .left-text {
        padding: 0;
    }
    
    .btn-blue,.btn-orange {
        margin-top: 0;
        max-width: 300px;
    }

    
    /*---------------------
	PCとスマホの切り替え
    -----------------------*/
    .block,.setteibi,.taisyou {
        display: none;
    }
    
    .block-sp,.setteibi-sp,.taisyou-sp {
        display: block;
    }
}