@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');

.container {
  width:100%;
  overflow: hidden;
}

video {
  width: 80%;
  max-width: 640px;
}

@media screen and (max-width:1024px){
video { width: 100%;}
}

/* -----------------------------------
	スライド
 ----------------------------------- */

.swiper-container {
    margin: 20px auto 40px auto;
}

.swiper-container >.swiper-pagination-bullets {
    width: 100%;
    padding: 20px 0 0;
    bottom: 0;
    position: relative;
}

.swiper-container .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 10px;
    display: inline-block;
    border-radius: 100%;
    background: #cecece;
    opacity: 1;
}

.swiper-container .swiper-pagination-bullet-active {
    opacity: 1;
    background: #222;
}

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

.visual {
  width:100%;
  max-width:1000px;
  margin: 20px auto 50px auto;
}

.visual picture img {
  width: 100%;
  height:auto;
}
 
.content {
  position: relative;
  width: 100%;
  margin: 0 auto;
  font-weight:500;
  color: #444;
}

.gray { 
  background:#F2F6F7;
  padding:35px 0;
}

.yellow { 
  background: #F1F1F1;
  padding:50px 0;
}

@media screen and (max-width:684px){
.yellow {  padding:30px 0;}
}

.content h2 {
  font-size:1.4rem;
  padding:0.5em;
}

.en-title {
  color: #585757;
  font-family: 'Oswald', sans-serif;
  font-size: 2.8rem;
  font-weight:600;
  line-height:1.1;
  margin-bottom:20px;
}

@media (min-width: 685px) and (max-width: 959px) {
.visual { margin: 20px auto 5% auto;}
}

@media screen and (max-width:684px){
.visual { margin: 20px auto 40px auto;}
.en-title { font-size:2.4rem;}
}

/* -----------------------------------
	title
 ----------------------------------- */

.title {
  width: 90%;
  max-width: 1000px;
  margin: 40px auto 16px auto;
  position: relative;
  text-align: center;
  border-bottom: 2px dashed #585757;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}

.title h1 {
  font-family: YakuHanJP, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",'M PLUS 1p';
  font-size: clamp( 16px, calc( 10px + 1.5vw ), 28px );
  font-weight: 500;
  margin: 0;
  flex: 1;
  text-align: center;
  line-height: 1.6;
}

.title img {
  width: auto;
  height: 80px;
  object-fit: contain;
}

.title_p {
  font-family: YakuHanJP, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",'M PLUS 1p';
  font-size: clamp( 15px, calc( 11px + 1vw ), 24px );
  line-height: 1.6;
  width: 90%;
  max-width: 900px;
  margin: 0 auto 2em auto;
  text-align: center;
}

@media screen and (max-width:784px){
.title img { height: 65px;}
}

@media screen and (max-width:684px){
.title img { height: 50px;}
}

/* -----------------------------------
	box01
 ----------------------------------- */

.box01 {
  position: relative;
  width: 90%;
  max-width: 700px;
  font-family: YakuHanJP, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",'M PLUS 1p';
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 10px auto 0 auto;
  text-align:center;
  z-index:2;
}

.box01-obje {
  width: 30%;
  max-width: 150px;
  position: absolute;
  right: -20%;
  top: -30%;
  z-index: 3;
}

.box01-obje img {
  width: 100%;
  height: auto;
}

.box01 .box {
  flex:1;
  font-size: 1rem;
  line-height:1.8;
}

.box01 .box h2 {
  color: #585757;
  font-size: clamp( 18px, calc( 16.5px + 0.375vw ), 21px );
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",'M PLUS 1p';
  font-weight: 600;
  line-height: 1.5;
  border-bottom: 2px dashed #585757;
  margin-bottom: 0.8em;
  padding: 0 0 0.4em 0;
  width: fit-content;
}

.box01 figure {
  display: block;
  width: 50%;
  max-width: 370px;
  height: auto;
}

.box01 figure img{
  display: inline-block;
  width: 100%;
  height:auto;
}

@media screen and (max-width:1020px){
.box01 figure { width: 43%;}
}

@media screen and (max-width:784px){
.box01-obje { right: -12%;}
}

@media screen and (max-width:684px){
.box01{ width: 94%; flex-flow: column-reverse;　margin:0 auto;}
.box01-obje { width:90px; right: -1%; top: -13%;}
.box01 .box { width:100%; padding-top: 0;}
.box01 .box h2 { line-height:1.4; margin: 0 auto 0.8em auto; text-align: center !important;}
.box01 .box p { text-align: center !important;}
.box01 figure { width: 90%; max-width: 800px; margin:0 auto 2em 1em;}
}

/* -----------------------------------
	lineup
 ----------------------------------- */

.lineup {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 70px auto 110px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.lineup-obje {
  width: 30%;
  max-width: 200px;
  position: absolute;
  left: -2%;
  top: -50%;
  z-index: 2;
}

.lineup picture {
  max-width: 712px;
}

.lineup-obje img,
.lineup picture img {
  display:inline-block;
  width: 100%;
  height:auto;
}

@media screen  and (min-width:685px) and (max-width:1024px){
.lineup-obje { display:none;}
ul.lineup-list img { width: 94%;}
	
}

@media screen and (max-width:684px){
.lineup { width: 86%; margin: 50px auto 85px auto;}
.lineup-obje { width:110px; left: -6%; top: -28%;}
ul.lineup-list { flex-direction: column;}
ul.lineup-list li { width: 100%; margin-bottom: 2em;}
ul.lineup-list li:last-child { margin-bottom:0;}
ul.lineup-list li:nth-of-type(2)  { width: 100%; border-left: none; border-right: none;}
ul.lineup-list img { width: 100%;}
}

/* -----------------------------------
	point_01
 ----------------------------------- */

#point_01 {
  font-size:1rem;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",'M PLUS 1p';
  margin-bottom:2em;
}

#point_01 h3 {
  width: 95px;
  margin: -96px auto 60px auto;
  text-align: center;
}
#point_01 h3 img {
  display: inline-block;
  width: 100%;
  height:auto;
}

.point_01_box {
  width:90%;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:0 auto 3em auto;
  text-align:center;
}	
	
.point_01 {
  width: 46%;
  margin: 0 auto;
  text-align: center;
}

.point_01 figure {
  margin-bottom: 1em;
}

.point_01 p {
  text-align: center;
}

.point_01 img {
  border-radius: 10px;
  width: 100%;
  height: auto;
}

.point_01-text {
  display: inline-block;
  text-align: left;
}

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


@media screen and (max-width:1024px){
.point-01{ width:80%; margin: 0 auto 50px auto;}
.point-01-obje { right: -10%;}
.point_01 { width: 48%;}
}

@media screen and (min-width:685px) and ( max-width:1024px) {
.last { margin-top: 1em;}
}

@media screen and (max-width:684px){
#point_01 { padding-bottom: 3em;}
.point-01 {margin: 0 auto 50px auto; padding-bottom: 3.5em;}
.point-01-obje { width: 120px; right: -9%; top: -4%;}
.point { flex-flow: column; justify-content: center;}
.point_01 { width: 100%; margin-bottom: 1em;}
.point_01_box{flex-flow: column; justify-content: center; margin: 0 auto;}
.point_01_box figure { width: 80%; margin: 0 auto 1em auto;}
.point_01-text { width: 100%; justify-content: center; margin-left: 0;}
.point_01-text p { text-align:center;}
.first p { margin-bottom:1.5em;}
.last{  width: 90%; margin-bottom: 0;}
#point_01 h3 { margin: -76px auto 30px auto;}
}

/* -----------------------------------
	point_02
 ----------------------------------- */

#point_02 {
  font-size:1rem;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",'M PLUS 1p';
  margin-bottom:2em;
}

#point_02 h3 {
  width: 95px;
  margin: -80px auto 30px auto;
  text-align: center;
}
#point_02 h3 img {
  display: inline-block;
  width: 100%;
  height:auto;
}

#point_02 h4 {
  width: 80%;
  margin: 0 auto 1em auto;
  text-align: center;
}

.point_02_box {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 2em auto 6em auto;
  text-align:center;
}

.point_02_box h3 {
    width: 95px;
    margin: -76px auto 25px auto;
    text-align: center;
}

.point_02_box h3 img {
    width: 100%;
    height:auto;
}

.point_02_box h4 {
    width: 80%;
    margin: 0 auto 0.2em auto;
    text-align: center;
}

.point_02_box p.sub {
    font-size:1.2rem;
    margin: 0 auto 2em auto;
    text-align: center;
}

.point_02-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.point_02 {
  display: flex;
  flex-direction: column;
  width: 32%;
  padding: 1.5em;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.point_02-image {
  min-height: 0%;
  margin:0 auto;
  text-align:center;
}

.point_02-image img {
  display:inline-block;
  width: 100%;
  max-width: 200px;
  height: auto;
  vertical-align: bottom;
}
	
.point_02-text {
  display: flex;
  flex-grow:1;
  align-items:flex-start;
  margin-bottom:1em;
}

@media screen and (max-width:1029px){
.point_02 { padding: 1em;}
.point_02-text p.no { font-size: 1.6rem;}
}

@media screen and (max-width:599px){
.point_02-list { flex-direction: column;}
.point_02 { width: 100%; margin-bottom:1.5em; padding: 1em;}
.point_02-image img { width:60%; max-width: 400px;}
}

/* -----------------------------------
	point-03
 ----------------------------------- */

.point_03_box {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  text-align:center;
}

.point_03_box h3 {
  width: 150px;
  margin: -68px auto 25px auto;
  text-align: center;
}

.point_03_box h3 img {
  width: 100%;
  height:auto;
}

.package {
  position: relative;
  width:auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin:3em auto 6.5em auto;
}

.package figure {
  width: 400px;
  margin-right: 20px;
}

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

.package div {
  display: flex;
  flex-direction: column;
}

.package div p {
  font-size:115%;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",'M PLUS 1p';
  line-height:1.8;
}

.package div p.bottom {
  margin-top: auto;
  padding-top:2em;
}

@media screen and (max-width:684px){
.package { flex-direction: column; margin:1em auto 4em auto;}
.package h4.en-title { text-align:center;}
#point_03 { padding-bottom: 3em;}
.point_03_box h3 { width: 150px; margin: -68px auto 35px auto;}
.package figure { width: 200px; margin: 0 auto;}
.package div {padding-top:0.5em;padding-bottom:1.5em;}
.package div p.bottom {padding-top:0;}
.package div p {text-align:center;}
}

/* -----------------------------------
	point-04
 ----------------------------------- */

#point_04 {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

#point_04 h3 {
  width: 95px;
  margin: -46px auto 30px auto;
  text-align: center;
}

#point_04 h3 img {
  width: 100%;
  height:auto;
}

.box01-2 {
  position: relative;
  width: 90%;
  max-width: 660px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 3em auto 6em auto;
  text-align:center;
}

.box01-2 .box01-2-left {
  display: block;
  width: 64.15%;
  max-width: 400px;
  height: auto;
  margin-right:6.31%;
}

.box01-2 .box01-2-right {
  width: 29.54%;
  max-width: 192px;
}

.box01-2 .box01-2-right ul {
  flex-flow: column;
}

.box01-2 .box01-2-right ul li {
  margin-bottom:1.5em;
}

.box01-2 .box01-2-right ul li:last-child {
  margin-bottom:0;
}

.box01-2 img{
  width: 100%;
  height:auto;
}

@media screen and (max-width:684px){
.box01-2 { flex-direction: column; margin:2em auto 5em auto;}
.box01-2 .box01-2-left { width: 90%; margin-bottom:1.5em; margin:0 auto 1.5em auto; text-align:center;}
.box01-2 .box01-2-right { width: 100%; max-width: 800px;}
.box01-2 .box01-2-right ul { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
.box01-2 .box01-2-right ul li { width:33.333%;margin-bottom: 0;}
}

/* 製品-スペック */

.item-box{
  width: 100%;
  margin: 0 auto 3% auto;
  text-align:center;
}

.item-box h3 {
  width: 95px;
  margin: -96px auto 35px auto;
  text-align: center;
}

.item-box h3 img {
  width: 100%;
  height:auto;
}

#item-spec{
  width:90%;
  max-width:680px;
  margin:0 auto;
  text-align:center;
}

table.spec{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  empty-cells:show;
}

table.spec tr:nth-child(odd){
	background: #F6F7F7;
}

table.spec th{
  width:12em;
  padding:12px 14px;
  font-weight:normal;
  vertical-align: top;
}

table.spec td.spec-name {
  border-left: 1px solid #FEFEFE;
}

table.spec th.spec-name,
table.spec td.spec-name{
  background:#585757;
  color:#FFF;
  font-weight:bold;
}

.spec td{
  border-left: 1px solid #8E8A89;
  padding:12px 14px;
}

.spec td.non-border{
  border-left: none;
}

.spec ul li{
  padding-left: 1em;
  text-indent: -1em;
}

ul.remarks{
  margin:2em 0 2em;
}

ul.remarks li{
  padding-left: 1em;
  text-indent: -1em;
}

/* 商品-取扱説明書 */

#item-other{
  width:90%;
  max-width:680px;
  margin:50px auto;
  text-align:center;
}

#item-other ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
}

#item-other li{
  display: flex;
  width:100%;
  display:inline-block;
  justify-content:space-between;
  border: 1px solid #666;
  box-sizing: border-box;
  font-size:1.3rem;
  font-weight:bold;
  line-height: 1.2;
  text-align: center;
  vertical-align:text-top; 
}

#item-other li:nth-child(2) {
  border-left:none;
}

#item-other li a{
  position: relative;
  display:block;
  width:100%;
  padding: .7em 2em;
  text-align: center;
  text-decoration: none;
}
  
#item-other li a:hover {
  color:#333;
  background: #E3E2E1;
}

.overflow {
  display:none;
}

@media screen and (max-width:684px){
.item-box h3 { margin: -76px auto 30px auto;}
table.spec{ width:auto; table-layout: fixed;}
table.spec th{ width:7.5em;padding:10px 0.5em;font-weight:normal; vertical-align: top; text-align:center; border-top:1px solid #E3E2E1;}
table.spec td{ vertical-align: middle;}
table.spec th.spec-name { text-align:center;}
table.spec td.sp-left{ text-align: left;}
#item-other{-ms-flex:1; flex: 1; margin:8% auto;}
#item-other ul { display: block;}
#item-other li{ width: 100%; margin:0 0 4% 0; display: block;}
#item-other li:nth-child(2) {  border-left: 1px solid #666;}
}

@media screen and (max-width:599px){
.table-wrap{overflow-x: scroll;}
.overflow { display:block; margin-bottom:0.3em;}
}