@charset "UTF-8";

/* -----設定 */

body {
  min-width: auto !important;
}

.useful-container {
  overflow: hidden ;
  width: 100% ;
  margin: 0 auto ;
  color: #000 ;
}
.useful-container img {
  max-width: 100% ;
  width: 100% ;
  vertical-align: bottom ;
}
.useful-container video {
  vertical-align: bottom ;
}

@media screen and (max-width: 768px) {
  .useful-container img {
    max-width: 100% ;
    width: 100% ;
    vertical-align: bottom ;
  }
}

/* contents */
.useful-contents {
  width: 100% ;
  max-width: 1248px ;
  padding: 0 20px ;
  margin: 0 auto ;
}



/* MV */
.useful-mv {
  margin: 60px 0 224px ;
}
@media screen and (max-width: 768px) {
  .useful-mv {
    margin: 24px -20px -30px ;
  }
}

.useful-mv02 {
  margin: 60px 0 224px ;
  display: flex ;
  justify-content: space-between ;

}
.useful-mv02 .box01 {
  width: 664px;
  overflow: hidden ;
  display: flex ;
  flex-direction: column ;
  justify-content: space-between ;
}

.useful-mv02 .box02 {
  width: 544px ;
}
.useful-mv02 video {
  width: 100% ;
}
@media screen and (max-width: 768px) {
  .useful-mv02 {
    margin: 24px -20px -30px ;
    flex-direction: column ;
  }
  .useful-mv02 .box01 {
    width: 100%;
  }
  .useful-mv02 .box02 {
    width: 100% ;
  }
}

.useful-mv03 {
  margin: 60px 0 224px ;
  display: grid;
  width: 100% ;
  grid-template-columns: 54.96% 1fr;
  grid-template-rows: auto 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.useful-mv03 .box01 {
  grid-area: 1 / 1 / 2 / 2;
  overflow: hidden ;
  display: flex ;
  flex-direction: column ;
  justify-content: space-between ;
}
.useful-mv03 .box01 h1 {
  margin: 13px 0 0 ;
  font-size: min(38px , 3.14svw) ;
  font-weight: 700 ;
  -webkit-text-stroke: 0.8px ;
  line-height: 1.36 ;
}
.useful-mv03 .box01 h1  span{
  font-size: min(46px , 3.8svw) ;
}
.useful-mv03 .box01 h1  span.small{
  font-size: min(44px , 3.5svw) ;
}
.useful-mv03 .box02 {
  grid-area: 2 / 1 / 3 / 2;
  overflow: hidden ;
  display: flex ;
  flex-direction: column ;
  justify-content: space-between ;
}
.useful-mv03 .box02 p {
  margin-top:  auto ;
  background: #0084B9 ;
  color: #fff ;
  font-size: min(24px , 1.98svw) ;
  line-height: 1.33 ;
  font-weight: 500 ;
  padding: 14px ;
  text-align: center ;
}
.useful-mv03 .box03 {
  grid-area: 1 / 2 / 3 / 3;
}
.useful-mv03 video {
  width: 100% ;
}
@media screen and (max-width: 768px) {
  .useful-mv03 {
    margin: 24px -20px -30px ;
    display: flex ;
    flex-direction: column ;
    width: auto ;
  }
  .useful-mv03 .box01 h1 {
    margin: 13px 0 20px ;
    font-size: 7.46svw ;
    line-height: 1.36 ;
    padding:  0 0 0 5.33vw ;
  }
  .useful-mv03 .box01 h1  span{
    font-size: 8svw ;
    /* font-size: min(32px , 8.53svw) ; */
  }
  .useful-mv03 .box01 h1  span.small{
    font-size: 7.46vw ;
  }
  .useful-mv03 .box02 p {
    margin-top: 0 ;
    font-size: 4.26svw ;
    font-weight: 500 ;
    padding: 12px ;
    line-height: 1.5 ;
  }

}



/* 見出し */


.useful-hl01 {
  margin: 200px 0 0 ;
}
@media screen and (max-width: 768px) {
  .useful-hl01 {
    margin: 96px 0 0 ;
  }
}

.onayami-hl {
  position: relative ;
  height: min(105px , 8.94svw) ;
}
.onayami-hl .onayami {
  background: #F2F2F2 ;
  width: min(239px , 19.78svw ) ;
  height: min(105px , 8.94svw) ;
  z-index: 2 ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  font-size: min(32px , 2.64svw ) ;
  font-weight: 700 ;
  border-radius: 53px ;
  line-height: 1 ;
  position: absolute ;
  left: 0 ;
  top: 0 ;
}
.onayami-hl .onayami .num {
  color: #0084B9 ;
  font-size: min(80px , 6.62svw ) ;
  line-height: 1 ;
  margin: 0 0 10px ;
}
.onayami-hl .hl {
  background: #0084B9 ;
  width: 100%  ;
  height: min(105px , 8.94svw) ;
  padding-left: min(239px , 19.78svw ) ;
  border-radius: 53px ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  font-size: min(38px , 3svw ) ;
  color: #fff ;
  font-weight: 700 ;
  text-align: center ;
}
@media screen and (max-width: 768px) {
  .onayami-hl {
    height: auto ;
  }
  .onayami-hl .onayami {
    width: 153px ;
    height: 67px;
    z-index: 2 ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    font-size: 19px ;
    font-weight: 700 ;
    border-radius: 33px ;
    line-height: 1 ;
    position: relative;
    left:  inherit;
    top: inherit;
    margin: 0 auto ;
  }
  .onayami-hl .onayami .num {
    font-size: 51px ;
    margin: 0 0 10px ;
  }
  .onayami-hl .hl {
    height: auto ;
    min-height: 105px ;
    padding: 18px 5px ;
    border-radius: 53px / 50%;
    font-size: min(26px , 6.93svw) ;
    line-height: 1.23 ;
    margin-top: -15px ;
  }
}



body .useful-hl02 {
  margin: 20px 0 20px ;
  font-size: 38px ;
  line-height: 1.44 ;
  text-align: center ;
  font-weight: bold ;
}
body .useful-hl02.--wide {
  margin: 120px 0 20px ;
}
@media screen and (max-width: 768px) {
  body .useful-hl02 {
    margin: 32px 0 20px ;
    font-size: 25px ;
    line-height: 1.53 ;
  }
  body .useful-hl02.--wide {
    margin: 60px 0 20px ;
  }
}

body .useful-hl03 {
  margin: 120px 0 0 ;
  font-size: 38px ;
  line-height: 1.44 ;
  text-align: center ;
  font-weight: 500 ;
  color: #0084B9 ;
  padding: 12px ;
  background: #FDF53F ;
  border-radius: 41px ;
}
@media screen and (max-width: 768px) {
  body .useful-hl03 {
    margin: 60px 0 0 ;
    font-size: 24px ;
    line-height: 1.33 ;
    padding: 7px 30px ;
    border-radius: 57px ;
  }
}

.useful-kaiketsu {
  margin: 80px 0 20px ;
}
@media screen and (max-width: 768px) {
  .useful-kaiketsu {
    margin: 45px 0 20px ;
  }
}


/* テキスト */
body .useful-text01 {
  font-size: min(26px , 2.15vw) ;
  line-height: 1.92 ;
  font-weight: 500 ;
}
@media screen and (max-width: 768px) {
  body .useful-text01 {
    font-size: 22px ;
    line-height: 2.18 ;
    font-weight: 500 ;
  }
}


body .useful-text02 {
  margin: 40px 0 0 ;
  font-size: 24px ;
  line-height: 1.66 ;
  text-align: center ;
}
body .useful-text02.--narrow {
  margin: 20px 0 0 ;
}
@media screen and (max-width: 768px) {
  body .useful-text02 {
    margin: 20px 0 0 ;
    font-size: 18px ;
    line-height: 1.77 ;
    text-align: center ;
  }
  body .useful-text02.--spleft {
    text-align: left ;
  }
}

body .useful-text03 {
  margin: 40px 0 0 ;
  font-size: 24px ;
  line-height: 1.66 ;
  text-align: center ;
}
body .useful-text03.--narrow {
  margin: 20px 0 0 ;
}
@media screen and (max-width: 768px) {
  body .useful-text03 {
    margin: 20px 0 0 ;
    font-size: 15px ;
    line-height: 1.77 ;
    text-align: center ;
  }
  body .useful-text03.--spleft {
    text-align: left ;
  }
}

body .useful-caption01 {
  margin: 10px 0 0 ;
  font-size: 28px ;
  line-height: 1.42 ;
  font-weight: 700 ;
}
@media screen and (max-width: 768px) {
  body .useful-caption01 {
    font-size: 18px ;
    font-weight: 500 ;
  }
}

body .useful-caption02 {
  margin: 10px 0 0 ;
  font-size: 24px ;
  line-height: 1.66 ;
  text-align: center ;
}
@media screen and (max-width: 768px) {
  body .useful-caption02 {
    font-size: 15px ;
  }
}

body .useful-caption03 {
  margin: 30px 0 0 ;
  font-size: 14px ;
  line-height: 1.71 ;
  text-align: center ;
}
@media screen and (max-width: 768px) {
  body .useful-caption03 {
    font-size: 12px ;
  }
}

body .movie-caption-01 {
  font-size: 24px ;
  line-height: 1.77 ;
  font-weight: 500 ;
  margin: 10px 0 0 ;
}
@media screen and (max-width: 768px) {
  body .movie-caption-01 {
    font-size: 18px ;
  }
}

body .movie-caption-02 {
  font-size: 14px ;
  line-height: 1.27 ;
  font-weight: 300 ;
  margin: 0 0 0 ;
}
@media screen and (max-width: 768px) {
  body .movie-caption-02 {
    font-size: 11px ;
  }
}


/* コンテンツレイアウト */

.useful-layout01 {
  display: flex ;
  gap: min(40px , 3.31vw);
  margin: 110px 0 0 ;
}
.useful-layout01 .box01 {
  width: 48.34% ;
}
.useful-layout01 .box02 {
  flex: 1 ;
  display: flex ;
  align-items: center ;
}
@media screen and (max-width: 768px) {
  .useful-layout01 {
    display: flex ;
    gap: 30px;
    margin: 30px 0 0 ;
    flex-direction: column ;
  }
  .useful-layout01 .box01 {
    width: 100% ;
  }
  .useful-layout01 .box02 {
  }
}

.useful-layout02 {
  display: flex ;
  gap: min(40px , 3.31vw);
  margin: 40px 0 0 ;
}
.useful-layout02.--mrwide {
  margin-top: 60px ;
}
.useful-layout02.--mrwide2 {
  margin-top: 88px ;
}
.useful-layout02 .box01 {
  flex: 1 ;
}
@media screen and (max-width: 768px) {
  .useful-layout02 {
    display: flex ;
    gap: 25px;
    margin: 20px 0 0 ;
    flex-direction: column ;
  }
  .useful-layout02.--mrwide2 {
    margin-top: 30px ;
  }
}

.useful-movie {
  margin: 80px 0 0;
}
@media screen and (max-width: 768px) {
  .useful-movie {
    margin: 20px 0 0;
  }
}



.narrow-layout {
  width: 100% ;
  max-width: 1088px ;
  margin: 0 auto ;
}


/* 画像 */

.oh-img01 {
  margin: 13px 0 0 ;
}

.oh-img02 {
  margin: 60px 0 0 ;
}
@media screen and (max-width: 768px) {
  .oh-img02 {
    margin: 17px 0 0 ;
  }
}


.tsufu-img01 {
  margin: 40px 0 0 ;
}
@media screen and (max-width: 768px) {
  .tsufu-img01  {
    margin: 20px 0 0 ;
  }
}

.tsufu-img02 {
  margin: 40px 0 0 ;
}
@media screen and (max-width: 768px) {
  .tsufu-img02  {
    margin: 10px 0 0 ;
  }
}

.tsufu-img03 {
  margin: 40px 0 0 ;
}
@media screen and (max-width: 768px) {
  .tsufu-img03  {
    margin: 30px 0 0 ;
  }
}

.tsufu-imglayout {
  display: flex ;
  gap: min(40px , 3.31vw);
  margin: 10px 0 0 ;
}
.tsufu-imglayout .box01 {
  width: 65.39% ;
}
.tsufu-imglayout .box02 {
  width: 31% ;
}
@media screen and (max-width: 768px) {
  .tsufu-imglayout {
    flex-direction: column ;
    gap: 35px ;
    margin: 15px 0 0 ;
  }
  .tsufu-imglayout .box01 {
    width: 100% ;
  }
  .tsufu-imglayout .box02 {
    width: 100% ;
  }
}


.soft-img01 {
  margin: 78px 0 0 ;
}
@media screen and (max-width: 768px) {
  .soft-img01  {
    margin: 32px 0 0 ;
  }
}

.soft-img02 {
  margin: 34px 0 0 ;
}
@media screen and (max-width: 768px) {
  .soft-img02  {
    margin: 20px 0 0 ;
  }
}



/* 商品 */
.prd-block {
  background: #EDFCFF ;
  padding: 60px 0 ;
  margin: 200px auto 0 ;
}
@media screen and (max-width: 768px) {
  .prd-block {
    padding: 30px 20px 40px ;
    margin: 80px auto 0 ;
  }
}

body .prd-hl {
  font-size: 38px ;
  line-height: 1.44 ;
  text-align: center ;
  font-weight: bold ;
  font-weight: 500 ;
}
@media screen and (max-width: 768px) {
  body .prd-hl {
    font-size: 24px ;
    line-height: 1.25 ;
    text-align: center ;
    font-weight: 500 ;
  }
}

.prd-layout01 {
  width: 100% ;
  max-width: 1248px ;
  padding: 0 20px ;
  margin: 60px auto 0 ;
  display: flex ;
  gap: 40px ;
}
.prd-layout01 .box01 {
  flex: 1 ;
}
@media screen and (max-width: 768px) {
  .prd-layout01 {
    width: 100% ;
    padding: 0 ;
    margin: 30px auto 0 ;
    display: flex ;
    gap: 40px ;
    flex-direction: column ;
  }
}

.prd-layout02 {
  width: 100% ;
  max-width: 1248px ;
  padding: 0 20px ;
  margin: 60px auto 0 ;
  display: flex ;
  gap: 40px ;
  flex-wrap: wrap ;
}
.prd-layout02 .box01 {
  width: calc( (100% - 80px) / 3 ) ;
}
@media screen and (max-width: 768px) {
  .prd-layout02 {
    width: 100% ;
    padding: 0 ;
    margin: 30px auto 0 ;
    display: flex ;
    gap: 40px ;
    flex-direction: column ;
  }
  .prd-layout02 .box01 {
    width: 100% ;
  }
}

.prd-layout03 {
  width: 100% ;
  max-width: 1248px ;
  padding: 0 20px ;
  margin: 60px auto 0 ;
  display: flex ;
  gap: 40px ;
  flex-wrap: wrap ;
}
.prd-layout03 .box01 {
  width: calc( (100% - 120px) / 4 ) ;
}
@media screen and (max-width: 768px) {
  .prd-layout03 {
    width: 100% ;
    padding: 0 ;
    margin: 30px auto 0 ;
    display: flex ;
    gap: 40px ;
    flex-direction: column ;
  }
  .prd-layout03 .box01 {
    width: 100% ;
  }
}


body .prd-block .text01 {
  margin: 10px 0 0 ;
  font-size: 22px ;
  line-height: 1.33 ;
  font-weight: 500 ;
}
body .prd-block .text02 {
  font-size: 26px ;
  line-height: 1.21 ;
  font-weight: 700 ;
}
body .prd-block .text03 {
  font-size: 22px ;
  line-height: 1.21 ;
  font-weight: 300 ;
}
@media screen and (max-width: 768px) {
  body .prd-block .text01 {
    font-size: 18px ;
  }
  body .prd-block .text03 {
    font-size: 15px ;
  }
}

.prd-block a {
  color: #000 ;
  display: block ;
}
.prd-block a:hover {
  opacity: .7 ;
}

.prd-link {
  padding: 0 25px 0 0 ;
  background: url(../image/arrow.svg) right center no-repeat ;
  display: inline ;
}


/* おすすめ */
.useful-recommend {
  background: #F5F5F5 ;
  margin: 200px auto 0 ;
  padding: 60px ;
}
.useful-recommend .hl01 {
  font-size: 38px ;
  font-weight: 700 ;
  text-align: center ;
  line-height: 1.53 ;
}
.useful-recommend .block01 {
  display: flex ;
  justify-content: space-between ;
  align-items: center ;
  margin: 40px 0 0 ;
}
.useful-recommend .block01 .box01 {
  width: 48.16% ;
}
.useful-recommend .text01 {
  font-size: 24px ;
  line-height: 1.58 ;
}
.useful-recommend .text02 {
  font-size: 16px ;
  line-height: 1.31 ;
  margin: 10px 0 0;
}
.useful-recommend .text03 {
  font-size: 24px ;
  line-height: 1.58 ;
  margin: 15px 0 0;
}
.useful-recommend .text03 a {
  color: #0084B9 ;
  padding: 0 25px 0 0 ;
  background: url(../image/arrow.svg) right center no-repeat ;
  display: inline-block ;
}
.useful-recommend .text03 a:hover {
  opacity: .7 ;
}
@media screen and (max-width: 768px) {
  .useful-recommend {
    background: #F5F5F5 ;
    margin: 60px auto 0 ;
    padding: 30px 20px 40px ;
  }
  .useful-recommend .hl01 {
    font-size: 25px ;
    margin: 0 -15px ;
  }
  .useful-recommend .block01 {
    flex-direction: column ;
    margin: 30px 0 0 ;
    gap: 20px ;
  }
  .useful-recommend .block01 .box01 {
    width: 100% ;
  }
  .useful-recommend .text01 {
    font-size: 15px ;
    line-height: 1.58 ;
    text-align: center ;
  }
  .useful-recommend .text02 {
    font-size: 12px ;
    line-height: 1.5 ;
    margin: 10px 0 0;
    text-align: center ;
  }
  .useful-recommend .text03 {
    font-size: 15px ;
    line-height: 1.58 ;
    margin: 15px 0 0;
    text-align: center ;
  }
}




/* ボタン */

.useful-btn01 {
  display: flex ;
  justify-content: center ;
  margin: 60px auto 0 ;
}
.useful-btn01 a {
  background: #F5F5F5 ;
  border-radius: 10px;
  color: #0084B9 ;
  display: inline-block ;
  text-align: center ;
  padding: 12px 70px ;
  font-weight: 500 ;
  font-size: 24px ;
}
.useful-btn01 a:hover {
  opacity: .7 ;
}
@media screen and (max-width: 768px) {
  .useful-btn01 a {
    padding: 14px 25px ;
    font-size: 15px ;
  }
}


/* -----media----- */
.pc-only {}

.sp-only {
	display: none !important;
}

/* -----SP */
@media screen and (max-width: 768px) {
	.pc-only {
		display: none !important;
	}

	.sp-only {
		display: block !important;
	}
}


/* -----PC */
@media screen and (min-width: 1281px) {
	.pc-none {
		display: none !important;
	}
}

/* -----TAB */
@media screen and (max-width: 1280px) and (min-width: 769px) {
	.tab-none {
		display: none !important;
	}
}

/* -----SP */
@media screen and (max-width: 768px) {
	.sp-none {
		display: none !important;
	}
}