@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
}
html{
    background-color: #eee;
    box-sizing:border-box;
}
html, body {
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont
    , "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM
    , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}
.hide{
	display:none;
}
div.disp-sp{
    display: none;
}
section{
	border: 1px #b1bfc5 solid;
    border-width: 1px 0 0 0;
    margin-top:150px;
    }
@media screen and (max-width: 959px) {
    
}
@media screen and (max-width: 480px) {
    div.disp-pc{
        display: none;
    }
    div.disp-sp{
        display: block;
    }
}
footer{
    background-color: #182e38;
    padding:15px;
    text-align: center;
    margin-top: 50px;
    color:#fff;
    font-size: 0.4rem;
}
footer img{
    width:90%;
    max-width: 200px;
    vertical-align: middle;
    display: block;
    margin:0 auto;
}
footer a{
    color:#fff;
    font-size:0.8rem;
    text-decoration: none;
}
footer a:hover{
    text-decoration: underline;
}
/*font-family: "Helvetica Neue", "Helvetica"
, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;*/
header {
    position: fixed; /* ヘッダーを固定する */
    top: 0; /* 上部から配置の基準位置を決める */
    left: 0; /* 左から配置の基準位置を決める */
    width: 100%; /* ヘッダーの横幅を指定する */
    height: 70px; /* ヘッダーの高さを指定する */
    box-sizing:border-box;
    background-color:white;
    padding:15px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    z-index:10000;
}
.main{
    margin-top:70px;
}
header .logo{
    width:40px;
}
header .logo, nav{
    display: inline-block;
    vertical-align: middle;
}
nav ul{
    margin:0;padding:20px 0 0 0;
}
nav li{
    display: inline;
    margin-left:10px;
}
nav li a{
    color:black;
    text-decoration: none;
}
nav li a:hover{
    color:red;
    text-decoration:underline;
    transition : 0.3s;
}
.sp-nav{
    display: none;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    transform: translateX(100%);
    background-color: #fff;
    transition: ease .4s;
    z-index:9999;
    border: solid;
    border-color: transparent;
    border-width: 70px 0 0 0;
    box-sizing: border-box;
}
.sp-nav li{
    display:block;
    margin-left:0 ;
}
  .nav-items__item a {
    color: black;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 1.3rem;
    padding:20px 0px;
  }
  .nav-items__item:last-child a {
    margin-bottom: 0;
  }
 /* ハンバーガーメニュー */  
 .hamburger {
    width: 40px;
    height: 40px;  
    background-color:transparent;
    border-color: transparent;
    display:none;

    border-radius: 50%;
    
  }  
  .hamburger span {
    width: 28px;/*100%;*/
    height: 1px;
    background-color: #000;
    position: relative;
    transition: ease .4s;
    display: block;
  }
  .hamburger span:nth-child(1) {
    top: 0;
  }
  .hamburger span:nth-child(2) {
    margin: 8px 0;
  }
  .hamburger span:nth-child(3) {
    top: 0;
  }
  /* ハンバーガーメニュークリック後のスタイル */
  .sp-nav.active {
    transform: translateX(0);
  }
  .hamburger.active span:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    top: -9px;
    transform: rotate(-45deg);
  } 

@media screen and (max-width: 959px) {
    header nav, header .logo{
        display:none;
    }
    .sp-nav{
        display: block;
    }
    .hamburger{
        display: block;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
}

.inq-button{
    text-align: center;
}

.inq-button a{
    width:100%;
    max-width:400px;
    box-sizing: border-box;
    padding:10px;margin:0;
  position: relative;
  display: inline-block;  
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 0.5rem;
}
header .inq-button {
    position: absolute;top: 5px;right:5px;
    height: 70px;
}
header .inq-button a{
    width:200px;
    padding: 5px 15px;
}

.inq-button a {
  color: #fff;
  background-color: #ff0e5b;
  border-bottom: 5px solid #cb0041;
}
.inq-button a:hover {
  opacity: 0.6;
}
.inq-button a:active{
    /*margin-top: 8px;*/
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    /*border-bottom: 2px solid #cb0041;*/
}
.inq-button p{
    font-size:1.3rem;
    font-weight: 700;
    margin:0 0 3px 0;
    /*letter-spacing: 0.1em;*/
}
header .inq-button p{
    letter-spacing: 0.1em;
}
.inq-button p:first-child{
    font-size:0.7rem;
    font-weight: normal;
}
.inq-button img{
    width: 20px;
    margin-right: 5px;
}
@media screen and (max-width: 959px) {
    
}
@media screen and (max-width: 480px) {
    /*.inq-button a{
        width:100%;
        box-sizing: border-box;
    }
    header .inq-button a{
        height:58px;
        width:100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .inq-button img{
        width: 30px;
        margin:5px 0 0 0;
    }*/
}
.main{
    position: relative;
    width:100%;
}
.main .main-image{
    width:100%;
    height: 500px;
    object-fit: cover;
    object-position: top right;
}
.main .main-image-tate{
    display:none;
    width:100%;
    height: calc(100vh - 70px);
    object-fit: cover;
    object-position: 50% 0;
}
@media screen and (orientation: portrait) {
    /*縦長*/
    .main .main-image{
        display:none;
    }
    .main .main-image-tate{
        display: block;
    }
}

.main p{
    margin:0;
}
.main .main-message{
    font-size:3.2rem;
    font-weight:700;
    color:white;
}
.main .main-message{
    position: absolute;
    top: 0px;
    left: 0px;
    display: table;
    height: 500px;    
}
.main .main-message>div{
    display: table-cell;
    vertical-align: middle;
    padding-left:100px;
    text-shadow: 1px 1px 2px #555555;
}
.main .main-message>div p:not(:first-child){
    margin-top:2px;
}
.main .main-message .gyousyu{
	margin-top:20px !important;
}
.main .main-message .gyousyu .strong{

background: linear-gradient(transparent 70% , yellow 10%);
}
.main-message .strong{
    font-weight: 900;
}
.strong{
    color:#ff0e5b;
}
@media screen and (max-width: 1200px) {
.main .main-message>div{

    padding-left:50px;

}
    .main .main-message{
        font-size:4.3vw;
    }
}
@media screen and (max-width: 959px) {
    .main .main-message>div{
        padding-right:0px;
    }

}
@media screen and (max-width: 480px) {

}
@media screen and (orientation: portrait) {
    .main .main-message{
        font-size:7vw;
        right:auto;
        text-align: center;
        display:block;
        height:auto;
        width:100%;
        top: 50px;
    }
    .main .main-message>div{
        display:block;
        padding-right:0px;
        padding-left:0px;
    }
}
.main .logo{
    position: relative;
    display: block;
    top: 25px;
    width: 350px;    
}
@media screen and (orientation: portrait) {
    .main .logo{
        top:30px;
        width: 90%;
        max-width:350px;  
        margin: auto;
    }
}

.ithojo{
    text-align: right;
    position: absolute;
    top: 5px;
    right: 5px;
}
.ithojo>div{
    background-color: #009aea;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    padding: 5px 15px;
    color:#d6ff00;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
}
@media screen and (orientation: portrait) {
    .ithojo>div{
        font-size: 0.6em;
    }
}

article{
    width:95%;
    max-width:900px;
    margin:0px auto;
}
article{
    font-size:1.2rem;
    line-height: 1.5;
}
h1{
    font-size: 4rem;
    font-weight: 900;
    margin: 10px 0 100px;
    color: #31b0ec;
    line-height: 1;
}
h1>span{
    font-size: 1.8em;
    font-weight: 700;
    color: #8acfef;
    margin-right: 10px;
}

h2{
    font-size: 2rem;
    margin:0 0 80px;
}
h2 .faceicon {
    float: left;
    width:80px;
}
h2 .faceicon img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.says {
    display: inline-block;
    position: relative; 
    margin: 0 0 0 15px;
    padding: 30px;
    max-width: calc(100% - 100px);
    box-sizing: border-box;
    border-radius: 12px;
    background: #fff;
}
.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 30px; 
    left: -19px;
    border: 8px solid transparent;
    border-right: 18px solid #fff;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}
.says p {
    margin: 0;
    padding: 0;
    text-align: left !important;
}
h2 >img{
    width: 80%;
    display: block;
    margin: 20px auto 0;
}
@media screen and (max-width: 959px) {
	h2 .faceicon {
        margin-top:10px;
        width:60px;
    }
    .says {
        margin: 0 0 0 15px;
        padding: 20px;
        max-width: calc(100% - 80px);
    }
}
@media screen and (max-width: 480px) {
	h1{
        font-size: 10vw;
    }
    h2{
        font-size: 1.5rem;
    }
    h2 .faceicon {
        width:50px;
    }
    .says {
        margin: 0 0 0 10px;
        padding: 10px;
        max-width: calc(100% - 65px);
    }
}
@media screen and (max-width: 959px) {
    h2 >img{
        width: 95%;
    }
}
@media screen and (max-width: 480px) {

}
.sec02 p{
    text-align: center;
}
.nayami{
    display:flex;
    align-items: center;
    margin-top:50px;
}

.nayami figure{
    width:30%;
    max-width:100px;
}
figure>img{
    width: 100%;
}
figure{
    margin:0;
    text-align: center;
}
figcaption{
    font-size:0.8em;
    margin-top:-5px;
}
.nayami ul{
    list-style: none;
    padding-left:15px;
    margin:0;
    font-family: 'Zen Kurenaido', sans-serif;
}
.nayami+div{
    display:flex;
    margin-top: 10px;
    align-items: center;
}
.nayami+div img{
    width:20%;
    max-width:200px;
    height:90px;
}
.nayami+div ul{
    margin:0;
}
@media screen and (max-width: 959px) {

}
@media screen and (max-width: 480px) {
    .nayami+div{
        display:block;
    }
    .nayami+div img{
        transform: rotate(90deg);
        display: block;
        margin: 20px auto 20px;
        width: 100px;
        height: 90px;
    }
}
ul.horizontal-circle{
    display:flex;
    justify-content: center;
    padding:0;
    margin:10px 0;
}
ul.horizontal-circle li {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border:10px solid #b1bfc5;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    color:#184052;
    text-align: center;
    line-height: 1;
    padding: 10px;
}
ul.horizontal-circle li:not(:first-child){
    margin-left:-30px;
}
.sec02 .horizontal-circle li{
    font-size: 2.5rem;
    font-weight:700;
}
.main .horizontal-circle li{
    font-size: 3.5rem;
    font-weight:700;
}
.key-message {
    margin-top:50px;
    font-size:2rem;
    font-weight:700;
    text-align:center;
    color:#184052;
}

@media screen and (max-width: 959px) {
    .main .horizontal-circle li{
        font-size: 2.5rem;
    }
    .sec02 .horizontal-circle li{
        font-size: 5vw;
    }
}
@media screen and (max-width: 480px) {
    ul.horizontal-circle li {
        height: auto;
        padding: 20px;
        border-width: 5px;
    }
}
.sec03 p{
    text-align: center;
}
.sec03 .car-cust{
    display:flex;
    align-items: center;
    justify-content: center;
    margin:0;
    padding:0;
    list-style: none;
}
.sec03 .car-cust li {
    text-align: center;
    line-height: 1;
    padding:20px 30px;
    font-size:3rem;
    font-weight:700;
    color:#184052;
}
.sec03 .car-cust li:first-child
,.sec03 .car-cust li:last-child{
    border-radius: 50%;
    border: 10px solid #b1bfc5;    
    width: 200px;
}
.sec03 .car-cust li span:first-child{
    font-size:3rem;
    font-weight:700;
    display:block;
}
.sec03 .car-cust img{
    height:40px;
    vertical-align: bottom;
    padding-right:10px;
}
.sec03 .car-cust li span:last-child{
    font-size: 1.5rem;
    display: block;
    margin-top: 10px;
}
@media screen and (max-width: 959px) {
	.sec03 .car-cust li span:first-child{
        font-size:5vw;
    }
    .sec03 .car-cust img{
        height:5vw;
    }
    .sec03 .car-cust li span:last-child{
        font-size: 3vw;
    }
    .sec03 .car-cust li {
        padding:20px 5px;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
}
.jisseki-flex{
    display:flex;
    flex-wrap:wrap;
    padding:0;
    list-style: none;
    justify-content: center;
}
.jisseki-flex li{
    /*border-radius: 50%;*/
    border: 10px solid #8899a1;
    background-color: #8899a1;
    color:#fff;
    width: 100px;
    height:100px;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 5px;
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
}
@media screen and (max-width: 480px) {
    .jisseki-flex li{
        width: 15vw;
        height: 15vw;
        margin: 2px;
        font-size:3vw;
    }
}


h3{
    color:#184052;
    font-size:1.8rem;
    font-weight: 700;
    margin-bottom:10px;
    margin-top:30px;
}
.usage{
    display:flex;
}
.usage figure{
    width:20%;
    max-width:150px;
}
.sec04 ol{
    margin:0;
    width:80%;
}
.sec04 .usage li.kome:before{
    content: "※";
    margin-right: 0.3em;
}
.sec04 .usage li.kome{
    margin-top:10px;
    list-style-type: none;
    text-indent: -1.3em;
}

.sec04 dt{
    display: list-item;
 list-style-type:disc;
 margin-left: 1.3em;
}
.sec04 dt:not(:first-child){
    margin-top:20px;
}
.sec04 dd{
    margin:0;
}
.sec04 dd img{
    display:block;
    width:100%;
    max-width:500px;
    margin: auto;
}

.sec06>p{
    text-align: center;
}
.sec07 .izak-info{
    display: flex;
    justify-content: center;
}
.sec07 .izak-info img{
    width:400px;
}
.sec07 table{
    border-collapse: collapse;
    border-spacing: 0;
    margin-left:10px;
}
.sec07 td, th{
    border: 1px #000000 solid;
    padding: 5px 10px;
}
.sec07 th{
    background-color: gray;
    color:#fff;
    font-size: 1rem;
    text-align: left;
}
.sec07 td{
    font-size:1rem;
}
@media screen and (max-width: 959px) {
    .sec07 .izak-info{
        display: block;
    }
    .sec07 .izak-info img{
        width:80%;
        display:block;
        margin:auto;
    }
    .sec07 table{
        width: 80%;
        margin: 10px auto 0;

    }
    
}
@media screen and (max-width: 480px) {
    
    .sec07 .izak-info img, .sec07 table{
        width:100%;
    }
}
.sec01 ul{
	padding-left:0;
}
.sec01 li{
	list-style:none;
}
.sec01 li+li{
	margin-top:10px;
}