@charset "utf-8";

/*---------------------------------
リセットｃｓｓ
---------------------------------*/

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box

}
.js-fadeinup-trigger,
.js-fadein-trigger {
  opacity: 0;
} 

/* =====================
共通
===================== */

body{
  font-family: Segoe UI, Segoe UI, Segoe WP, Arial, Sans-Serif;
    color: #24292e;
    line-height:2;
    background:#f8fcfd;
    margin:0;
}

html {
  font-size: 100%;
  -webkit-overflow-scrolling: touch;
}

/* 横揺れ防止 */
html, body {
  overflow-x: hidden;
  width: 100%;
}
p {
  font-size: 1rem;
}
a{
 text-decoration: none;
}

img{
 max-width: 100%;
}

li{
  list-style: none;
  font-size: 1.2rem;
}
.wrapper{
    max-width:900px;
    margin:auto;
    padding:20px;
}

#contents,
#voice{
    background:#fff;
    padding:30px;
    margin-bottom:30px;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(0,0,0,.06);
}

/* =====================
見出し
===================== */

h1{
    font-size:2rem;
    text-align:center;
    line-height:1.5;
    color:#1c7d8b;
    margin-bottom:30px;
}

h2{
    background:#e8f7fa;
    border-left:6px solid #4eb7c5;
    padding:12px 15px;
    margin:50px 0 25px;
    font-size:1.4rem;
    color:#14616c;
}

h3{
    color:#1c7d8b;
    font-size:1.2rem;
    border-bottom:2px solid #d9eef2;
    padding-bottom:8px;
    margin-top:30px;
}

/* =====================
画像
===================== */

figure{
    text-align:center;
    margin:30px 0;
}

figure img{
    max-width:100%;
    height:auto;
    border-radius:10px;
}

/* =====================
本文
===================== */

p{
    margin-bottom:1.2em;
}

/* =====================
リスト
===================== */

main ul{
    background:#f7fcfd;
    padding:20px 25px;
    border-radius:10px;
    margin:20px 0;
}

main ul li{
    margin-bottom:10px;
}

/* =====================
体験談
===================== */

#voice h3{
    margin-top:40px;
}

#voice p:nth-of-type(even){
    background:#fafdfd;
    padding:20px;
    border-left:4px solid #9fd7de;
    border-radius:8px;
}

/* =====================
CTA
===================== */

.tb2{
    width:100%;
    max-width:700px;
    margin:40px auto;
    border-collapse:separate;
    border-spacing:20px;
}

.tb2 td{
    text-align:center;
}

.tb2 img{
    max-width:100%;
    height:auto;
}

.font12 a{
    display:block;
    text-decoration:none;
    color:#14616c;
    font-weight:bold;
}

/* =====================
戻るボタン
===================== */

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

.button{
    display:inline-block;
    background:#4eb7c5;
    color:#fff;
    text-decoration:none;
    padding:15px 35px;
    border-radius:50px;
    font-weight:bold;
    transition:.3s;
}

.button:hover{
    opacity:.8;
}

/* =====================
スマホ
===================== */

@media(max-width:768px){

    #contents,
    #voice{
        padding:20px;
    }

    h1{
        font-size:1.6rem;
    }

    h2{
        font-size:1.2rem;
    }

    .tb2,
    .tb2 tbody,
    .tb2 tr,
    .tb2 td{
        display:block;
        width:100%;
    }

    .tb2 td{
        margin-bottom:20px;
    }
}