@import url(//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap&subset=japanese);

body {
  font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2, h3 {
  font-family: 'Noto Sans JP';
}

/* -----------------------------------
	main
----------------------------------- */

.wrap {
    padding-top: 0;
}

.main {
  color: #000;
}

.inner {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width:559px){
.wrap { padding-top: 2em;}
}

/* -----------------------------------
	section-01
----------------------------------- */

#section-01 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#section-01 h1 {
  width: 100%;
}

#section-01 h1 img {
  display:inline-block;
  width: 100%;
  height:auto;
}

/* -----------------------------------
	section-02
----------------------------------- */

#section-02 {
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
  text-align:center;
}

ul.flexbox-sec02 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:0 auto;
  align-items: center;
}

ul.flexbox-sec02 li {
  flex-basis: 30%;
  max-width: 303px;
}

ul.flexbox-sec02 li:nth-of-type(2){ 
  width:38%;
}

ul.flexbox-sec02 li img {
  width: 100%;
  height:auto;
}

.section-02-title h2{
  position:relative;
  width: 100%;
  font-size:32px;
  font-weight:500;
  margin: 0 auto 1.5em auto;
  text-align:center;
}

.section-02-title p{
  position:relative;
  width: 100%;
  font-size:1rem;
  line-height:1.6;
  margin: 0 auto 1.2em auto;
  text-align:center;
}

.pc-space { 
  padding:0.4em;
}

.section-02-title p.mb1-5{
  margin: 0 auto 1.5em auto;
}

.flex-order-1 {
  order: 1;
}

.flex-order-2 {
  order: 2;
}

.flex-order-3 {
  order: 3;
}

@media screen and (max-width: 1020px){
.section-02-title h2{ font-size:1.8rem;}
.section-02-title p.section-02-font{ font-size: 0.8rem;}
}

@media screen and (max-width:768px){
#section-02 { margin: 3em auto 0 auto;}
ul.flexbox-sec02 { align-items: start;}
.section-02-title h2{ font-size:3.5vw;}
.section-02-title p { font-size: 0.78rem;}
.pc-space { display:none; padding:0;}
}

@media screen and (max-width:599px){
ul.flexbox-sec02 { flex-flow: column;}
ul.flexbox-sec02 li { flex-basis: 100%; max-width: 750px;}
ul.flexbox-sec02 li:nth-of-type(2){ width:100%;margin-bottom:2em;}
.section-02-title h2 { font-size: 1.3rem; margin: 0 auto 1.3em auto;}
.section-02-title p { font-size: 0.9rem;}
}

/* -----------------------------------
	section-03
----------------------------------- */

#section-03 {
  width: 100%;
  margin: 100px auto 60px auto;
  text-align:center;
}

div.visual {
  width: 100%;
}

div.visual img {
  width: 100%;
  height:auto;
}

@media screen and (max-width:768px){
#section-03 {  margin: 6em auto;}
}

@media screen and (max-width:599px){
#section-03 {  margin: 2em auto 4em auto;}
}

/* -----------------------------------
	section-04
----------------------------------- */

#section-04 {
  width: 100%;
  background: #CCD7CE;
  margin: 6em auto;
  padding: 6em 0;
  text-align:center;
}

#section-04 h2 {
  width: 86%;
  max-width: 580px;
  margin: 0 auto;
  padding-bottom: 5em;
  text-align:center;
}
#section-04 h2 img {
  width: 100%;
  height:auto;
}

#section-04 ul.check-list {
  width: calc( 90% - 8em);
  max-width: 1000px;
  background: #FFF;
  border-radius: 20px;      
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 4em 4em 6em 4em;
  text-align:center;
}

#section-04 ul.check-list li {
  position: relative;
  display: flex;
  align-items: center;
  width:40%;
  min-height:3em;
  font-size: 24px;
  text-align:left;
  border-bottom: 1px solid #111;
  padding: 1em 0 1em 56px;
  background: url(../../img/product/vho/vho04_02@2x.png) no-repeat left center;
}

@media screen and (max-width:1024px){
#section-04 { margin: 4em auto; padding: 4em 0;}
#section-04 ul.check-list li {  width:39%; font-size: 18px; padding: 1em 0 1em 40px; background: url(../../img/product/vho/vho04_02.png) no-repeat left center;}
}

@media screen and (max-width:768px){
#section-04 { margin: 3em auto; padding: 3em 0;}
#section-04 h2 { padding-bottom: 3.5em;}
#section-04 ul.check-list { width: calc(100% - 4em); padding: 2em 2em 4em 2em;box-sizing: border-box;-webkit-box-sizing: border-box;}
#section-04 ul.check-list li { flex-flow: column; align-items: start; width:100%; min-height:auto; font-size: 1rem;}
}

/* -----------------------------------
	section-05
----------------------------------- */

.section-05 {
  width: 100%;
  background: #CCD7CE;
  margin: 6em auto;
  padding: 6em 0;
  text-align:center;
}

.section-05 ul.icon-list {
  width: 90%;
  max-width: 1260px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  text-align:center;
}

.section-05 ul.icon-list li {
  width:16.5%;
}

.section-05 ul.icon-list li img {
  width:100%;
  max-width:202px;
  height:auto;
}

@media screen and (max-width:1024px){
.section-05 { padding: 4em 0;}
}

@media screen and (max-width:768px){
.section-05 ul.icon-list { width: 94%; justify-content: center;}
.section-05 ul.icon-list li { width:29%;}
.section-05 ul.icon-list li:nth-of-type(2){ margin:0 1.5em;}
.section-05 ul.icon-list li:nth-of-type(4),
.section-05 ul.icon-list li:nth-of-type(5){ margin-top:2em;}
}

/* -----------------------------------
	section-06
----------------------------------- */

#section-06 .item-list {
  width: 90%;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin:0 auto 5em auto;
}

#section-06 .item-list img {
  display: block;
  width: 48%;
  max-width:390px;
  height: auto;
}

#section-06 .box {
  width: 46%;
}

#section-06 .box h2{
  position:relative;
  width: 100%;
  font-size:30px;
  font-weight: 400;
  letter-spacing: 0.15em;
  margin: 0 auto 1em auto;
}

#section-06 .box p{
  width: 100%;
  font-size:18px;
  line-height:1.8;
}

@media screen and (max-width:1024px){
#section-06 .item-list img { width: 42%;}
#section-06 .box h2{ font-size:1.5rem; margin: 0 auto 0.8em auto;}
#section-06 .box p{ font-size:1rem;}
}

@media screen and (max-width:768px){
#section-06 .item-list { align-items: start; margin: 0 auto 3em auto;}
#section-06 .item-list img { width: 45%; padding-top:0.4em;}
#section-06 .box { width: 48%;}
#section-06 .box h2{ margin: 0 auto 0.8em auto;}
#section-06 .box p{ font-size:14px;}
}

@media screen and (max-width: 599px){
#section-06 .item-list { width: 92%;}
#section-06 .box h2 { font-size: 1.2rem;}
}

/* -----------------------------------
	section-07
----------------------------------- */

.section-07 {
  width: 100%;
  margin: 0 auto 6em auto;
  border-top: 80px solid #CCD6CE;
}

.section-07 .logo {
  display: flex;
  margin-top: 80px;
}

.section-07 .logo figure {
  margin: 0 1.5em 3em 0;
}

.section-07 .logo img {
  width:auto;
  height:64px;
}

.section-07 .parent {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin:0 auto;
}

.section-07 .side {
  width: 130px;
  border-left: 1px solid #6b6361;
}

.section-07 .side img{
  width: 100%;
  max-width: 24px;
  height:auto;
  padding: 2em 0 0 15px;
}

.section-07 .item {
  flex: 1;
}

.section-07 .itembox {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin:0 auto 4em auto;
}

.section-07 .itembox-side {
  width: 360px;
  padding:0.5em;
}

.section-07 .itembox-side img{
  width: 100%;
  height:auto;
}

.section-07 .itembox-main {
  flex: 1;
  margin-left:8%;
}

.section-07 .itembox-main h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0.4em;
}

.section-07 .itembox-main p {
  margin-bottom: 0.4em;
}

.section-07 .itembox-main p.price {
  font-weight: 500;
}

.section-07 .itembox-main p.jan {
  margin-bottom: 2.5em;
}

.section-07 .itembox-main p span {
  font-size: 24px;
  font-family: 'Noto Sans JP';
}

.section-07 .itembox-main figure {
  width: 282px;
}

.section-07 .itembox img,
.section-07 .itembox-main figure img {
  width: 100%;
  height:auto;
}

.buy_drop-down {
    width: 100%;
    padding: 12px 0;
	border:1px solid #222;
    background-color: #FFF;
    color: #222;
}
.buy_drop-down:before {
  display:none;
}
.buy_drop-down:hover {
  background-color: #FFF;
  color:#222;
  text-decoration: none;
}

ul.buy_drop-down-items {
    width: 100%;
    max-width: 1000px;
    flex-wrap: wrap;
    justify-content: space-between;	
    margin: 2em auto 0 auto;
}

ul.buy_drop-down-items li {
    width: calc(33% - 2px);
	margin-bottom:1em;
}

ul.buy_drop-down-items li:nth-of-type(3n) {
    border-right:1px solid black;
}

ul.buy_drop-down-items li:nth-child(-n+6) {
    margin-bottom: 1.8em;
}

@media screen and (max-width:1020px){
.section-07 .itembox { align-items: flex-start;}
.section-07 .itembox-side { width: 40%; max-width: 360px;}
.section-07 .side { width: 90px;}
}

@media screen and (max-width: 836px) {
ul.buy_drop-down-items li:nth-child(3), ul.buy_drop-down-items li:nth-child(6) { border-right: 0 solid black;}
}

@media screen and (max-width:768px){
.section-07 .logo { width:140px; margin-top: 40px;}
.section-07 .logo img { width:auto; height: 42px;}
.section-07 .side { width: 15%;}
.section-07 .side img { padding: 0 0 0 10px;}
.section-07 .item { width: 85%;}
.section-07 .itembox-side { margin-bottom:2.5em;}
.section-07 .itembox-side { width: 80%;}
.section-07 .itembox-main { margin-left: 0;}
ul.buy_drop-down-items li { width: 32.888%;}
.section-07 .itembox-main h2 { font-size: 1.3rem;}
.section-07 .itembox-main p span { font-size: 1.18rem;}
}

@media screen and (max-width:599px){
.section-07 .itembox-main h2 { font-size: 1rem;}
ul.buy_drop-down-items li { width: 49%;}
ul.buy_drop-down-items li:nth-of-type(3n) { border-right:none;}
ul.buy_drop-down-items li:nth-of-type(2n) { border-right:1px solid black;}
}

/* -----------------------------------
	section-08 , section-10
----------------------------------- */

#section-08,
#section-10 {
  width: 100%;
  background: #CCD7CE;
  margin: 6em auto;
  padding: 4em 0;
  text-align:center;
}

#section-08 h2,
#section-10 h2 {
  font-size: 2rem;
  letter-spacing: .05em;
  font-weight: 500;
  margin: 0 auto 0.4em auto;
  text-align:center;
}

#section-08 p,
#section-10 p {
  font-size: 1rem;
  margin: 0 auto;
  text-align:center;
}

#section-08 p.section-08-sub {
  font-size: 1.3rem;
}

#section-10 p.section-10-sub {
  font-size: 1.3rem;
  margin-bottom: 0.9em;
}

@media screen and (max-width:768px){
#section-08, #section-10 { margin: 2em auto 6em auto; padding: 3em 0;}
#section-08 h2,#section-10 h2 { font-size: 5.2vw;}
#section-08 p.section-08-sub { font-size: 4.2vw;}
#section-10 p { font-size: 0.9rem;}
#section-10 p.section-10-sub { font-size: 1.3rem;}
}

@media screen and (max-width:599px){
#section-10 p.section-10-sub { font-size: 1rem;}
}

/* -----------------------------------
	section-09
----------------------------------- */

#section-09 .item-list {
  width: 90%;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:0 auto;
}	
	
#section-09 .item {
  width: 32%;
  max-width: 280px;
  box-sizing: border-box;
  margin-bottom: 3em;
}	
	
#section-09 p {
  font-size: 16px;
  line-height:1.8;
  padding:1.44rem;
}

#section-09 p span {
  font-weight:500;
  border-bottom: 2px solid #222;
}

#section-09 img {
  width: 100%;
  max-width: 250px;
  height: auto;
}

@media screen and (max-width:1020px){
#section-09 .item { width: 29%; }
#section-09 p { font-size: 14px; padding: 1.2rem;}
}

@media screen and (max-width:768px){
#section-09 .item { width: 49%; max-width: 480px; margin-bottom: 2em;}	
#section-09 p { font-size: 0.9rem; padding:0.9rem;}
#section-09 img { max-width: 500px;}
}

@media screen and (max-width:559px){
#section-09 .item-list { width: 65%; flex-flow: column;}
#section-09 .item { width: 100%;}	
}

/* -----------------------------------
	section-11
----------------------------------- */

#section-11 .section-11-box {
  width: 100%;
  max-width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin:0 auto 4em auto;
}

#section-11 .section-11-box-side {
  width: 54.49%;
  max-width: 485px;
}

#section-11 .section-11-box-main {
  width: 41.8%;
  max-width: 372px;
}

#section-11 .section-11-box-side img,
#section-11 .section-11-box-main img {
  width: 100%;
  height:auto;
}

@media screen and (max-width:768px){
#section-11 .section-11-box { flex-direction: column-reverse; width: 80%;}
#section-11 .section-11-box-side,#section-11 .section-11-box-main { width: 100%;}
#section-11 .section-11-box-main { margin-bottom: 2em;}
}

/* -----------------------------------
	section-12
----------------------------------- */

#section-12 {
  width: 100%;
  background: #CCD7CE;
  margin: 80px auto;
  padding: 70px 0;
  text-align:center;
}

#section-12 h2 {
  position: relative;
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0 auto 0.4em auto;
  text-align:center;
}
#section-12 h2:before,
#section-12 h2:after {
  position: relative;
  display: inline-block;
  content: "";
  background: #222;
  width: 2px;
  height: 1em;
  margin: 0 1em;
  margin-top: -.1em;
  vertical-align: middle;
} 
#section-12 h2:before {
  transform: rotate(-45deg);
}
#section-12 h2:after {
  transform: rotate(45deg);
}

#section-12 .h2-sub {
  font-size: 1rem;
  margin: 0 auto 3em auto;
  text-align:center;
}

#section-12 h2.h2_margin {
  margin: 2em auto 1em auto;
}

#section-12 ul.interview {
  width: 90%;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:0 auto 5em auto;
}

ul.interview figure {
  margin-bottom: 1.5em;
}

ul.interview figure img {
  width:100%;
  height:auto;
}
	
ul.interview li {
  display: flex;
  flex-direction: column;
  width: 48%;
  background:#FFF;
  border-radius: 20px;
  box-sizing: border-box;
  padding:5%;
}	
	
ul.interview li p,
ul.users-voice li p {
  font-size:1.03rem;
  line-height:1.8;
}

ul.interview li p.li-bottom {
  margin-top: auto;
  padding-top:1.5em;
}

ul.interview li p.li-bottom span {
  border-bottom: 1px solid #111;
}

#section-12 ul.users-voice {
  width: 90%;
  max-width: 1000px;
  background:#FFF;
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:0 auto;
  padding:4% 4% 0 4%;
  box-sizing: border-box;
}

ul.users-voice li {
  display: flex;
  flex-direction: column;
  width: 30%;
  margin-bottom:5%;
}

ul.users-voice li:nth-of-type(2),
ul.users-voice li:nth-of-type(3){ 
  padding-top:2em;
}

ul.users-voice li img {
  width: 100%;
  height:auto;
}

ul.users-voice div.li-bottom img {
  width:40px;	
  height:auto;
  padding: 0 0.9em 2em 0
}
	
ul.users-voice div.li-bottom {
  display:flex;
  align-items:center;
  margin-top: auto;
  padding-top:1.5em;
}

ul.users-voice div.li-bottom img {
  width:40px;	
  height:auto;
  padding: 0 0.9em 2em 0
}

@media screen and (max-width:1020px){
ul.users-voice li { width: 46%; margin-bottom:2.5em;}
ul.users-voice li:nth-of-type(3){ padding-top:0;}
}

@media screen and (max-width:768px){
#section-12 { margin: 40px auto; padding: 60px 0;}
#section-12 h2 { font-size: 5.3vw;}
#section-12 .h2-sub { font-size: 0.9rem; margin: 0 auto 2em auto;}
#section-12 ul.interview { width: 92%; margin: 0 auto 2.5em auto;}
#section-12 ul.users-voice { width: 92%;}
ul.interview li { width: 100%; margin-bottom:1.5em; padding:7% 6%;}
ul.users-voice li { width: 100%; margin-bottom:4%; padding:6%; border-bottom: 1px solid #EEE;}
ul.users-voice li:last-child { border-bottom: none;}
ul.interview li p, ul.users-voice li p { font-size: 0.9rem;}
}

/* -----------------------------------
	section-13
----------------------------------- */

#section-13 {
  width: 100%;
  margin: 6em auto;
  text-align:center;
}

#section-13 h2 {
  position: relative;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1.5em;
}

#section-13 ul.howto {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:0 auto 5em auto;
  box-sizing: border-box;
}

ul.howto li {
  display: flex;
  flex-direction: column;
  width: 30%;
}	

ul.howto li h3 {
  font-size: 1.3rem;
  font-weight:500;
  height: 3em;
  margin: 0 auto 2em auto;
  text-align: center;
}	

ul.howto li p {
  font-size: 1.03rem;
  line-height:1.8;
}

ul.howto li figure {
  margin-bottom: 1.5em;
}

ul.howto li figure img {
  width:100%;
  height:auto;
}

#section-13 hr {
  width: 100%;
  height: 2px;
  background: #FFF;
  background-image: linear-gradient(to right, rgba(35, 24, 21,1), rgba(35, 24,21,1) 18px, transparent 18px, transparent 18px);
  background-repeat: repeat-x;
  background-size: 26px 2px;
  background-position: left bottom;
  margin-bottom:4em;
  padding-bottom: 2px;
}

.tab-wrap {
  width: 92%;
  display: flex;
  flex-wrap: wrap;
  margin:35px auto 0 auto;
  text-align:center;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  display: block;
  order: -1;
}
.tab-label {
  background: #EAEDEE;
  font-size:14px;
  color:#84919E;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: #84919E;
  color: White;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}

@media screen and (max-width:1020px){
ul.howto li h3 { font-size: 2.2vw; margin: 0 auto 1.8em auto;}
}

@media screen and (max-width:768px){
#section-13 { margin: 3em auto;}
#section-13 h2 { margin-bottom: 1em;}
#section-13 ul.howto { width: 85%; margin:0 auto 3em auto;}
ul.howto li { width: 100%; margin-bottom:2em;}
ul.howto li h3 { font-size: 1.15rem; margin: 0 auto 1em auto;}
ul.howto li p { font-size: 0.9rem;}
}

.jan th{
    font-weight:normal;
    width:7.5em;
}

.jan td::before{
    content: ":";
    padding-right:5px;
}

#links {
    padding: 0 0 90px 0;
}

#links h2 {
	color: #828F9C;
    font-size: 26px;
    font-weight: 500;
	margin-bottom: 35px;
}

.page-footer {
    background: #CCD6CE;
	padding: 3em 0;
}

address {
    font-weight:600;
    line-height: 1.8em;
	margin-bottom: 0;
}

address a {
    font-size: 16px;
	color: #000;
    outline: none;
}
	
address a:hover {
    color: #555;
    text-decoration: underline;
}