@charset "utf-8";
@font-face{
    font-family:'Noto Sans JP';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url(../fonts/NotoSansJP-Regular.otf) format('opentype');
}@font-face{font-family:'Noto Sans JP';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url(../fonts/NotoSansJP-Bold.otf) format('opentype');
}
*{
	position:relative;
	box-sizing:border-box;
}

body,input,select,textarea{
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
	font-size:15px;
	line-height:1.5;
	letter-spacing:0.08em;
	color:#333;
}

h1,h2,h3,h4,h5,h6{
}

a{
	color:rgb(47, 68, 160);
}


/* css animation (prefixes are cut) */
.animation {
	opacity:0;
}

.fadeup {
	transform-origin:center top;
	animation:fadeup 1s both;
}

.slidein-left {
	transform-origin:right center;
	animation:slidein_left 1s both;
}

.slidein-right {
	transform-origin:left center;
	animation:slidein_right 1s both;
}

.d3 {animation-delay:.3s;}
.d5 {animation-delay:.5s;}
.d10 {animation-delay:1s;}
.d15 {animation-delay:1.5s;}
.d20 {animation-delay:2s;}
.d25 {animation-delay:2.5s;}
.d30 {animation-delay:3s;}
.d35 {animation-delay:3.5s;}
.d40 {animation-delay:4s;}
.d45 {animation-delay:4.5s;}
.d50 {animation-delay:5s;}
.d55 {animation-delay:5.5s;}
.d60 {animation-delay:6s;}

@keyframes fadeup {
	0% {
		transform:translate(0,2em);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

@keyframes slidein_left {
	0% {
		transform:translate(-2em,0);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

@keyframes slidein_right {
	0% {
		transform:translate(2em,0);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

img.alignright{
	display: block;
	margin: 0 0 0 auto;
}
img.alignleft{
	display: block;
	margin: 0 auto 0 0;
}
img.aligncenter{
	display: block;
	margin: 0 auto;
}

/* base class */
.content-wrap{
    width: 100%;
    max-width: 1500px;
    margin: auto;
    padding:1rem;
}
.btn{
	display:inline-block;
	padding:1em;
	color:#fff;
	background:#455473;
	border: 1px solid #455473;
	transition: .2s;
    border-radius: 4px;
}

.btn-primary{
	background:#004ea1;
	border: 1px solid #004ea1;
}

.btn-secondary{
	background:#ea5b33;
	border: 1px solid #ea5b33;
}

.btn:hover{
	color:#455473;
	background:#fff;
}

.btn-primary:hover{
	color:#004ea1;
	background:#fff;
}

.btn-secondary:hover{
	color:#ea5b33;
	background:#fff;
}

.m-auto{ margin: auto; }
.m-5{ margin: .5rem; }
.mx-5{ margin:0 .5rem; }
.mb-5{ margin-bottom: .5rem; }
.mb-10{ margin-bottom: 1rem;}
.mb-15{ margin-bottom: 1.5rem;}
.mb-20{ margin-bottom: 2rem;}
.mb-30{ margin-bottom: 3rem;}

.p-5{ padding: .5rem; }
.p-10{ padding: 1rem; }
.p-15{ padding: 1.5rem; }
.p-20{ padding: 2rem; }
.pt-20{padding-top:2rem}
.px-20{padding-left:2rem;padding-right:2rem}
.py-10{padding-top:1rem;padding-bottom:1rem}
.py-15{padding-top:1.5rem;padding-bottom:1.5rem}
.py-20{padding-top:2rem;padding-bottom:2rem}

.border-rounded{
    border-radius: 4px;
}

.text-center{ text-align: center;}
.text-end{ text-align: right;}

.bg-gray{ background-color: #bac9d0;}
.bg-white{ background-color: #fff;}

.d-inline-block{ display:inline-block; }
.d-flex{ display:flex; width: 100%; }
.flex-col-3{
    width: 33.3333%;
}
.flex-wrap{ flex-wrap: wrap; }
.jc-space-around{
    justify-content: space-around;
}
.jc-space-between{
    justify-content: space-between;
}
.ai-center{
    align-items: center;
}
.content-md-wrap{
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding:1rem;
}

.absolute-link{
    position:absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}

.content-wrap .content-md-wrap{
    padding:0 1rem;
}

/* header */
.header-wrap{
    box-shadow: 2px 2px 5px #aaa;
}
.header-wrap .content-wrap{
    display: flex;
    justify-content: space-between;
}

.header-title >* {
    display: block;
    width: 190px;
    height: 70px;
    text-indent: -9999px;
    background-image: url(../img/spat-supersol-logo.webp);
    background-size: contain;
    background-position:left center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.header-nav .header-menu-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.header-nav-item{
    width: 100%;
}
.header-nav-item > *{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    width: 100%;
    height: 100%;
    color: #333;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}


/* main image */
.main-image{
    margin-bottom: 3rem;
    height: calc(100vh - 100px);
    min-height: 600px;
    overflow: hidden;
}

#particles-js{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    opacity: .3;
    z-index: -10;
}

.main-image::before{
    position: absolute;
    content:'';
    width: 2000px;
    height: 169px;
    background-image: url(../img/mono-line.webp);
    background-size:2000px;
    background-position: bottom right;
    z-index: 50;
    bottom:-90px;
    right: -7px;
}

.main-image-hover-text{
    position: absolute;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding:8% 1rem 1rem;
    max-width: 1500px;
    height: 100%;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    z-index: 100;
}

.main-image-hover-text .content-header{
    margin-bottom:1.5rem;
    font-size: 2.5rem;
    font-weight: bold;
}

.main-image-hover-text .spatman-mono{
    position: absolute;
    width: 100%;
    left: 130px;
    bottom:50px;
}

.main-image-hover-sub-text{
    position: absolute;
    margin: 1rem;
    padding:.5rem 1rem;
    max-width: 300px;
    bottom:0;
    right: 0;
    font-size: .75rem;
    z-index: 100;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 4px;
}

.main-image-slide{
    width: calc((100vw - 1500px) / 2 + 850px);
    height: 100%;
    margin: 0 0 0 auto;
    background-color: #fff;
    z-index: -1;
}

.main-image-slide::before{
    position: absolute;
    content: "";
    width: 20px;
    height: 100%;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    left:-1px;
    right: 0;
    z-index: 100;
}


.main-image-slide * {
    height: 100%;
}

.main-image-slide-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

/* supersol-introduction */

#supersol-introduction .supersol-overview{
    padding: 3rem 0;
    text-align: center;
}

#supersol-introduction .supersol-overview .float-tips{
    position: absolute;
    padding: .5rem;
    text-align: left;
    border-left:3px solid #004ea1;
    z-index: 100;
}

#supersol-introduction .supersol-overview .float-tips *{
    white-space: nowrap;
    text-shadow:
        1px 1px 0px #fff, -1px -1px 0px #fff,
        -1px 1px 0px #fff,  1px -1px 0px #fff,
        1px 0px 0px #fff, -1px  0px 0px #fff,
        0px 1px 0px #fff,  0px -1px 0px #fff;
}

#supersol-introduction .supersol-overview .float-tips:nth-child(1){
    top:5%;
    left:5%;
}

#supersol-introduction .supersol-overview .float-tips:nth-child(2){
    top:35%;
    left:0;
}

#supersol-introduction .supersol-overview .float-tips:nth-child(3){
    top:68%;
    left:15%;
}

#supersol-introduction .supersol-overview .float-tips:nth-child(4){
    top:13%;
    right:17%;
}

#supersol-introduction .supersol-overview .float-tips:nth-child(5){
    top:45%;
    right:0;
}

#supersol-introduction .supersol-overview .float-tips:nth-child(6){
    top:70%;
    right:25%;
}

#supersol-introduction .supersol-overview .float-center{
    position: absolute;
    margin: auto;
    width: 200px;
    height: 50px;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    z-index: 110;
}

#supersol-introduction .supersol-overview .float-center img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: hidden;
}


#supersol-introduction .supersol-overview .float-tips h4{
    font-size: 1.3rem;
    font-weight: bold;
}

#supersol-introduction .supersol-overview .float-tips p{
    font-size:.8rem;
}

#supersol-introduction .supersol-description{
    padding:1.5rem 3rem;
    border:1px solid #aaa;
    box-shadow: 2px 2px 5px #666;
}

#supersol-introduction .side-image-wrap{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 350px;
}

#supersol-introduction .side-image-content{
    width: 100%;
    height:100%;
    max-height: 500px;
}

#supersol-introduction .side-image-wrap img{
    position: absolute;
    display: block;
    width: 80%;
    height: auto;
}

#supersol-introduction .side-image-wrap:nth-child(1) img:nth-child(1),
#supersol-introduction .side-image-wrap:nth-child(3) img:nth-child(2){
    top: 10px;
    right: 0;
}

#supersol-introduction .side-image-wrap:nth-child(1) img:nth-child(2),
#supersol-introduction .side-image-wrap:nth-child(3) img:nth-child(1){
    bottom: 10px;
    left: 0;
}

#supersol-introduction .movie-wrap{
    width: 100%;
}

.youtube-slide .youtube-slide-item{
    margin: 1rem;
}

.youtube-slide .youtube-slide-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.youtube-slide-title{
    padding: .2rem;
    width: 100%;
    font-size: .75rem;
    font-weight: bold;
    bottom: 0;
    left: 0;
}

/* supersol-usage */
#supersol-usage{
    overflow: hidden;
}

#supersol-usage .usage-warp{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 auto 8rem;
}

#supersol-usage .usage-warp .usage-text{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: -3rem;
    padding: 3rem 0;
    width: 40%;
    z-index: 100;
}

#supersol-usage .usage-warp .usage-text span{
    font-size:.9rem;
    margin: .5rem;
    padding:.2rem 1rem;
    line-height: 1;
    background: #fff;
    color:#5c0808;
    border-radius: 4px;
}

#supersol-usage .usage-warp .usage-text::before{
    position: absolute;
    content: "";
    margin: auto;
    background-color: #5c0808;
    width: 100vw;
    height: 100%;
    top: 0;
    left: -50vw;
    transform: skewX(20deg);
    box-shadow: 2px 2px 5px #aaa;
}

#supersol-usage .usage-warp.nougyo .usage-text::before{
    background-color: #974e06;
}

#supersol-usage .usage-warp.ryokuka .usage-text::before{
    background-color: #058932;
}

#supersol-usage .usage-warp.jousui .usage-text::before{
    background-color: #004ea1;
}

#supersol-usage .usage-warp.other .usage-text::before{
    background-color: #455473;
}
#supersol-usage .usage-warp.nougyo .usage-text span{
    color: #974e06;
}

#supersol-usage .usage-warp.ryokuka .usage-text span{
    color: #058932;
}

#supersol-usage .usage-warp.jousui .usage-text span{
    color: #004ea1;
}

#supersol-usage .usage-warp.other .usage-text span{
    color: #455473;
}

#supersol-usage .usage-warp .usage-text:nth-child(2){
    justify-content: flex-start;
    width: 40%;
}
#supersol-usage .usage-warp .usage-text:nth-child(2)::before{
    transform: skewX(-20deg);
    left:auto;
    right: -50vw;
}


#supersol-usage .usage-warp .usage-text h4{
    margin: 2rem;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}

#supersol-usage .usage-warp .usage-text ul li{
    font-size: 1.3rem;
    color: #fff;
    display: flex;
    align-items: center;
}

#supersol-usage .usage-warp .usage-photo{
    width: 60%;
    height: 400px;
    border-radius: 0 10px 0 0;
    overflow: hidden;
}

#supersol-usage .usage-warp .usage-photo:nth-child(2){
    border-radius: 10px 0 0 0;
}


#supersol-usage .usage-warp .usage-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.usage-slide .usage-slide-item{
    margin: 1rem;
}

.usage-slide .usage-slide-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.usage-slide-title{
    position: absolute;
    padding: .2rem;
    width: 100%;
    font-size: .75rem;
    bottom: 0;
    left: 0;
    color: #fff;
    background-color: rgba(0,0,0,.8);
}

.price-list-wrap{
    display: flex;
    margin: auto;
    padding: 1rem;
    max-width: 1500px;
    justify-content: space-between;
}

.price-list-item{
    margin: 1rem;
    padding: 1rem 1.5rem;
    width: calc(100% - 2rem);
    background-color: #fff;
    border-radius: 10px;
}

.price-list-item > * {
    margin-bottom:1rem;
    font-weight: bold;
    font-size: 1.3rem;
}

.price-header{
    font-size: 1.78rem;
}

.factory-map{
    margin-top: 0;
}
.map-item{
    position: absolute;
    padding:.5rem;
    transition: .3s;
    cursor: pointer;
}
.map-item::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.9);
    border-radius: 4px;
    box-shadow: 2px 2px 4px #aaa;
    top: 0;
    left: 0;
    transition: .3s;
}
.item1{
    top: 57%;
    left: 35%;
}
.item2{
    top: 43%;
    left: 47%;
}
.item3{
    top: 38%;
    left: 64%;
}
.item4{
    top: 25%;
    right: 15%;
}
.item4{
    text-align: right;
}
.item4 .map-description{
    text-align: left;
}
.item5{
    top: 13%;
    left: 54%;
}
.item6{
    top: 32%;
    left: 26%;
}
.item7{
    top: 45%;
    left: 6%;
}
@keyframes float{
    0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.map-title{
    font-weight: bold;
}
.map-image{
    font-size: 0;
}
.map-description{
    width: 0;
    font-size: 0;
    overflow: hidden;
}
.map-item:hover{
    background: #fff;
    z-index: 100;
}
.map-image img{
    width: 0;
    transition: .3s;
}
.map-item:hover img{
    width: 280px;
}
.map-item:hover .map-description{
    width: 280px;
    font-size: .75rem;
}


/* footer */
.footer-wrap{
    margin-top: 3rem;
    padding-top: 90px;
    overflow: hidden;
}

.footer-wrap::before {
    position: absolute;
    content: '';
    width: 2000px;
    height: 169px;
    background-image: url(../img/mono-line.webp);
    background-size: 2000px;
    background-position: bottom right;
    z-index: -1;
    top: 0;
    right: -7px;
}

.footer-nav{
    display: flex;
    padding: 1rem;
    max-width: 1500px;
}

.footer-nav-item{
    margin: 0 1rem;
}

.footer-nav-item > *{
    color: #333;
    text-decoration: underline;
}

.footer-nav-item > *:hover{
    text-decoration: none;
}

.footer-contact-wrap{
    display: flex;
    justify-content: space-between;
    margin: auto;
    max-width: 1500px;
}

.footer-banner{
    max-width: 40%;
}

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

.footer-contact{
    padding: 1rem;
}

.footer-logo{
    display:flex;
    align-items: center;
    padding-left: 100px;
    height: 80px;
    font-size: 1.3rem;
    font-weight: bold;
    background-image: url(../img/spat-logo-with-spatman.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}



/* content */
.header-1{
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding: .5rem 40px;
    font-size: 2.3rem;
    font-weight: bold;
    text-align: center;
}

.header-1::before{
    position: absolute;
    content: '';
    margin: auto;
    height: 45px;
    width: 15px;
    background-image: url(../img/h3-bg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    top:0;
    bottom: 0;
}

.header-1::before{
    left: 0;
}

.header-1::after{
    position: absolute;
    content: '';
    margin: auto;
    height: 3px;
    width: 100%;
    background-color: #333;
    left: 0;
    bottom:0;
}

.header-1-string{
    font-size: 2.3rem;
    font-weight: bold;
    text-align: center;
}

.header-3{
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
}

#breadcrumb{
    margin: auto;
    padding: 1rem;
    max-width: 1500px;
}

#breadcrumb ul{
    display: flex;
    justify-content: flex-end;
}

#breadcrumb ul li{
    font-size: .75rem;

}

.page .wrapper{
    overflow: hidden;
}

.page-content{
    margin:auto;
    padding:1rem;
    max-width: 1200px;

}

.page-content > *{
    margin-top: 3rem;
}

.page-content table td > *{
    margin-top: 1.5rem;
}

.page-content h3{
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding: .5rem 40px;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

.page-content h3::before{
    position: absolute;
    content: '';
    margin: auto;
    height: 45px;
    width: 15px;
    background-image: url(../img/h3-bg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    top:0;
    bottom: 0;
}

.page-content h3::before{
    left: 0;
}

.page-content h3::after{
    position: absolute;
    content: '';
    margin: auto;
    height: 3px;
    width: 100%;
    background-color: #333;
    left: 0;
    bottom:0;
}

.page-content h4{
    display: inline-block;
    padding: .3rem 1rem;
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    border-radius: 8px;
    background-color: #004ea1;
}

.page-content h5{
    font-size: 1.1rem;
    font-weight: bold;
    color: #ea5b33;
}

.page-content > p{
    margin-left: auto;
    margin-right: auto;
    max-width: 850px;
}

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

.page-content > ul,
.page-content > ol{
    max-width: 800px;
    margin: 3rem auto;
}

.page-content li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd; /* グレーのボーダーを追加してアイテムを区切る */
  }

  /* 最後のリストアイテムのボーダーを削除 */
  .page-content li:last-child {
    border-bottom: none;
  }

  /* ハバリスト（水平なリスト）のスタイル */
  .page-content ul.horizontal-list {
    display: flex;
    justify-content: space-between;
  }

  /* ハバリストのアイテムのスタイル */
  .page-content ul.horizontal-list li {
    flex: 1;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
  }

  /* ネストされたリストのスタイル */
  .page-content ul ul, ol ol {
    margin-left: 20px;
  }

  /* ネストされたリストアイテムのマーカーを変更 */
  .page-content ul ul li,
  .page-content ol ol li {
    list-style-type: square;
  }

  /* マウスホバー時のスタイル */
  .page-content li:hover {
    background-color: #f5f5f5;
    cursor: pointer;
  }

.page-content table th,
.page-content table td{
    padding: 1rem;
}

.page-content table td h3{
    display: inline-block;
}

.page-content table.flex-box.bg-gray{
    background-color: #fff;
    padding: 1rem;
    margin: 3rem auto 0;
    width: calc(100% - 2rem) !important;
    border-radius: 8px;
}

.page-content table.flex-box.border-brown{
    border:3px solid #974e06;
    border-radius: 8px;
}
.page-content table.flex-box.border-brown h4{
    background-color: #974e06;
}

.page-content table.flex-box.border-green{
    border:3px solid #0e8040;
    border-radius: 8px;
}
.page-content table.flex-box.border-green h4{
    background-color: #0e8040;
}

.page-content table.flex-box.border-yellow{
    border:3px solid #dd9c0a;
    border-radius: 8px;
}
.page-content table.flex-box.border-yellow h4{
    background-color: #dd9c0a;
}

.page-content table.flex-box.border-blue{
    border:3px solid #004ea1;
    border-radius: 8px;
}
.page-content table.flex-box.border-blue h4{
    background-color: #004ea1;
}

.page-content table.flex-box.orange-block{
    background-color:#eebe2a;
    border-radius: 8px;
}

.page-content .brown-icon strong{
    font-size: .9rem;
    padding: .3rem;
    color: #fff;
    background-color: #974e06;
    border-radius: 4px;
}

.page-content .green-icon strong{
    font-size: .9rem;
    padding: .3rem;
    color: #fff;
    background-color: #058932;
    border-radius: 4px;
}

.page-content .yellow-icon strong{
    font-size: .9rem;
    padding: .3rem;
    color: #fff;
    background-color: #dd9c0a;
    border-radius: 4px;
}

.page-content .blue-icon strong{
    font-size: .9rem;
    padding: .3rem;
    color: #fff;
    background-color: #004ea1;
    border-radius: 4px;
}

.page-content table.flex-box.orange-block > tbody > tr{
    align-items: center;
}
.page-content table.flex-box.orange-block > tbody > tr > td{
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    padding: 1rem 0;
}

.page-content table.flex-box.bg-gray::before{
    position: absolute;
    content: '';
    margin: auto;
    height: calc(100% + 2rem);
    width: 100vw;
    background-color: #bac9d0;
    top:-1rem;
    left:calc((100vw - 1200px) / -2 - 2rem);
    z-index:-1;
}

.page-content table.flex-box,
.page-content table.flex-box > tbody{
    display: block;
}

.page-content table.flex-box > tbody > tr{
    display: flex;
}

.page-content table.flex-box.align-center > tbody > tr{
    align-items: center;
}

.page-content table.flex-box td{
    width: 100% !important;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.page-content table:not(.flex-box){
    width: 100%;
}

.page-content table:not(.flex-box) td{
    border-bottom: 1px solid #fff;
}

.page-content table:not(.flex-box) th{
    vertical-align: middle;
    text-align: center;
    color: #fff;
    background: #004ea1;
    border-bottom: 1px solid #fff;
}

.page-content table:not(.flex-box) tr:nth-child(2n+1){
    background-color: #eee;
}

.video-responsive{
    display: block;
    margin: auto;
    height: calc(100% - 4rem);
    width: 100%;
    max-width: 1300px;
}

/* form */
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="password"]{
    height: 2.4em;
    width: 100%;
    padding: 0 16px;
    border-radius: 4px;
    border: none;
    background-color: #fff;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

textarea {
    display: block;
    width: 100%;
    height: 100%;
    padding: 4px 16px;
    border-radius: 4px;
    border: none;
    background: #fff;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    resize: vertical;
}

.page-content form p{
    margin-top: 3rem;
}
textarea:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

.select-wrap {
    position: relative;
}

.select-wrap:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 12px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(135deg);
    pointer-events: none;
}

.select-wrap select {
    height: 2.4em;
    width: 100%;
    padding: 0 8px;
    border-radius: 4px;
    border: none;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.select-wrap select::-ms-expand {
    display: none;
}

.select-wrap select:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

.checkbox-wrap label,
.radio-wrap label{
    display: inline-block;
    margin: 0 .5rem .5rem 0;
}

.checkbox-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.checkbox-wrap input {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
}

.checkbox-wrap label > span {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: #666;
    position: relative;
}

.checkbox-wrap label > span:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-right: 6px;
    flex-shrink: 0;
}

.checkbox-wrap input:checked + span {
    color: rgb(33, 150, 243);
}

.checkbox-wrap input:checked + span:before {
    border: 1px solid rgb(33, 150, 243);
    background-color: rgb(33, 150, 243);
}

.checkbox-wrap input:checked + span:after {
    content: "";
    position: absolute;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    left: 0.4em;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0.4em;
    height: 0.65em;
    transform: translateY(-1px) rotate(45deg);
}

.checkbox-wrap input:focus-visible + span {
    background: linear-gradient(transparent 90%, rgba(33, 150, 243, 0.3) 90%);
}

.radio-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.radio-wrap.radio-inline{
    display: block;
}

.radio-wrap input {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
}

.radio-wrap label > span {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: #666;
}

.radio-wrap label > span:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}

.radio-wrap input:checked + .radio-wrap label > span {
    color: rgb(33, 150, 243);
}

.radio-wrap input:checked + span:before {
    border: 0.35em solid rgb(33, 150, 243);
}

.radio-wrap input:focus-visible + .radio-wrap label > span span {
    background: linear-gradient(transparent 90%, rgba(33, 150, 243, 0.3) 90%);
}

.form-table{
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 800px;
}

.form-table-row{
    padding: .5rem;
    width: 100%;
}
.form-table-head{
    padding:.5rem 0;
    font-weight: bold;
}
.form-table-row.half-size{
    width: 50%;
}
@media screen and ( max-width:520px) {
    .form-table-row.half-size{
        width: 100%;
    }
}

form th span{
    color: #f10;
}

.page-content form table tbody th,
.page-content form table tbody td{
    vertical-align: middle;
}

.page-content form table tbody th > *,
.page-content form table tbody td > *{
    margin-top: 0;
}

/* モーダル */
.modal-overlay {
    align-items: center;
    background: rgba(0,0,0,.6);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
  }

  .modal-container {
    background-color: #fff;
    max-height: 95vh;
    max-width: 95vw;
    overflow-y: auto;
    padding: 30px;
    width: 80%;
  }

  .modal-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .modal-close {
    background: transparent;
    border: 0;
  }

  .modal-header .modal-close::before {
    content: "\2715";
  }

  .modal-content {
    line-height: 1.5;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }

  .modal-open {
    display: block;
    margin: 100px auto;
  }

  .box01 {
    background-color: #ccc;
    height: 200px;
    margin: 0 auto;
    width: 80%;
  }

  .box02 {
    background-color: #ccc;
    height: 200px;
    margin: 0 auto;
    width: 80%;
  }

  /* モーダルアニメーション */
  @keyframes mmfadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes mmfadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes mmslideIn {
    from {
      transform: translateY(15%);
    }
    to {
      transform: translateY(0);
    }
  }

  @keyframes mmslideOut {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-10%);
    }
  }

  .micromodal-slide {
    display: none;
  }

  .micromodal-slide.is-open {
    display: block;
  }

  .micromodal-slide[aria-hidden="false"] .modal-overlay {
    animation: mmfadeIn .3s cubic-bezier(.0, .0, .2, 1);
  }

  .micromodal-slide[aria-hidden="false"] .modal-container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
  }

  .micromodal-slide[aria-hidden="true"] .modal-overlay {
    animation: mmfadeOut .3s cubic-bezier(.0, .0, .2, 1);
  }

  .micromodal-slide[aria-hidden="true"] .modal-container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
  }

  .micromodal-slide .modal-container,
  .micromodal-slide .modal-overlay {
    will-change: transform;
  }


.gnav__toggle {
    display: none;
}

@media screen and ( max-width:1500px) {
    .main-image-slide{
        width: calc(100vw - 650px);
        height: 100%;
        margin: 0 0 0 auto;
    }
}
@media screen and ( max-width : 1200px) {

    #supersol-introduction .side-image-wrap{
        display: none;
    }
    .content-md-wrap{
        max-width: 100%;
    }
    #supersol-introduction .supersol-overview .float-center{
        width: 300px;
        height: 75px;
    }
    .price-list-wrap{
        flex-wrap: wrap;
    }
    .price-list-item{
        width: calc(50% - 2rem);
    }
    .page-content table.flex-box.bg-gray::before{
        left:-2rem;
    }
}

@media screen and ( max-width : 1000px) {
    main img{
    max-width: 100%;
    height: auto;
}

    .main-image{
        height: 580px;
        min-height: auto;
    }
    .main-image-slide{
        width: calc(100vw - 500px);
    }
    .main-image-hover-text .content-header{
        font-size: 1.5rem;
    }
    .main-image-hover-text .slide-logo img{
        width: 420px;
        height: auto;
    }

    .gnav__toggle {
        display: block;
    }

    .gnav__toggle {
        position: fixed;
        display: table;
        margin: auto;
        padding: 1em 0 1em 20px;
        height: 50px;
        color: #666;
        font-size: 80%;
        font-weight: bold;
        line-height: 2.3;
        text-align: center;
        box-sizing: border-box;
        top: 2em;
        right: 2em;
        z-index: 9995;
        cursor: pointer
    }

    .gnav__toggle:before{
        position: absolute;
        content: '';
        width: 150%;
        height: 110%;
        background:#fff;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: -1;
        /* box-shadow: 2px 2px 10px #aaa; */
        transition: .2s;
    }
    .gnav__toggle:hover:before{
        /* box-shadow: 0px 0px 5px #aaa; */
    }

    .gnav__toggle #close_toggle {
        display: block;
        padding: 1em;
        text-align: right
    }

    .gnav__toggle__icon {
        position: absolute;
        display: block;
        margin: auto;
        width: 14px;
        height: 2px;
        background: #666;
        transition: .2s;
        top: 0;
        bottom: 0;
        left: 0
    }

    .gnav__toggle__icon:before,
    .gnav__toggle__icon:after {
        position: absolute;
        display: block;
        content: "";
        width: 14px;
        height: 2px;
        background: #666;
        transition: .3s;
        top: 50%;
        left: 0
    }

    .gnav__toggle__icon:before {
        margin-top: -6px
    }

    .gnav__toggle__icon:after {
        margin-top: 4px
    }

    .gnav__toggle__icon.close {
        background: rgba(0, 0, 0, 0)
    }

    .gnav__toggle__icon.close:before,
    .gnav__toggle__icon #panel-btn .close:after {
        margin-top: 0
    }

    .gnav__toggle__icon.close:before {
        margin-top: -1px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg)
    }

    .gnav__toggle__icon.close:after {
        margin-top: -1px;
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg)
    }

    .header-nav .header-menu-wrap {
        display: block;
        position: fixed;
        height: 100vh;
        top:0;
        right: -100%;
        padding-top: 90px;
        z-index: 9990;
        background: #fff;
        transition:.3s;
    }

    .header-nav .header-menu-wrap div{
        margin-bottom: 1rem;
    }

    .header-nav .header-menu-wrap div a{
        padding:.5rem 2rem;
        transition: .2s;
    }

    .header-nav .header-menu-wrap div a:hover{
        color: #fff;
        background-color: #f3927e;
    }

    .header-nav.open .gnav__overlay{
        position: fixed;
        content: '';
        width: 100vw;
        height: 100vh;
        background:rgba(0, 0, 0, 0.3);
        top:0;
        left:0;
        z-index: 9985;
        opacity: 0;
        transition: .2s;
    }

    .header-nav.open .gnav__overlay{
        opacity: 1;

    }

    .header-nav.open .header-menu-wrap{
        right: 0%;
        box-shadow: 2px 2px 10px #aaa;
    }
}

@media screen and ( max-width : 850px){
    .header-1{
        font-size: 1.5rem;
    }
    .header-1-string{
        font-size: 1.5rem;
    }
    .main-image{
        height: 500px;
    }
    .main-image::before{
        bottom: -75px;
    }
    #supersol-usage .usage-warp .usage-text{
        padding: 1rem 0;
        width: 45%;
    }
    #supersol-usage .usage-warp .usage-text ul li{
        font-size: 1rem;
    }
    #supersol-usage .usage-warp .usage-text h4{
        margin: 1rem;
        font-size: 1.5rem;
    }
    #supersol-usage .usage-warp .usage-photo{
        height: 300px;
    }
    .page-content table.flex-box tr{
        flex-wrap: wrap;
    }
    .page-content table.flex-box.sp-md-col-3 td{
        width: 33.3333% !important;
    }
}

@media screen and ( max-width:520px) {
    body, input, select, textarea{
        font-size: 14px;
    }
    .header-nav-item > *{
        justify-content: flex-start;
        text-align: left;
    }
    .main-image{
        height: 370px;
    }
    .main-image-hover-text .content-header{
        font-size: 1.3rem;
        text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
        -1px 1px 0 #FFF, 1px -1px 0 #FFF,
        0px 1px 0 #FFF,  0-1px 0 #FFF,
        -1px 0 0 #FFF, 1px 0 0 #FFF;
    }
    .main-image-hover-text .slide-logo img{
        width: 250px;
    }
    .main-image-hover-text .spatman-mono{
        left:0;
    }
    .main-image-hover-text .spatman-mono img{
        width: 100px;
        height: 100px;
    }
    .main-image-slide{
        width: calc(100vw - 80px);
    }
    .main-image-hover-sub-text{
        font-size: 0.5rem;
        max-width: 200px;
    }
    .main-image-hover-sub-text img{
        margin: 4px;
        width: 30px;
        height: auto;
    }

    #supersol-introduction > h3,
    #price-list > h3{
        margin-left: 1rem;
        margin-right: 1rem;
        padding-right: 0;
    }

    #supersol-introduction .supersol-overview{
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    #supersol-introduction .supersol-overview > img{
        display: block;
        max-width: 80%;
        margin: 1.5rem auto;
    }
    #supersol-introduction .supersol-overview .float-center{
        position: relative;
        margin: 2rem auto;
    }
    #supersol-introduction .supersol-overview .float-tips{
        position: relative;
        width: calc(50% - 1rem);
        margin:.5rem;
        padding: .5rem 0 .5rem .5rem;
        font-size: .9rem;
        top: auto !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
    }
    #supersol-introduction .supersol-overview .float-tips h4{
        font-size: 1rem;
    }

    #supersol-introduction .supersol-overview .float-tips *{
        white-space: unset;
    }

    #supersol-introduction .supersol-description{
        padding: 1rem;
    }

    #supersol-usage .py-15,
    #supersol-usage .px-20{
        padding: 1rem;
    }

    #supersol-usage .usage-warp{
        flex-wrap: wrap;
        margin: 0 auto 3rem;
    }
    #supersol-usage .usage-warp .usage-text{
        justify-content:flex-start;
        width: 90%;
        padding: 1rem;
    }

    #supersol-usage .usage-warp .usage-text ul li{
        font-size: .75rem;
    }
    #supersol-usage .usage-warp .usage-text span{
        margin: 0.3rem;
        font-size: .6rem;
    }

    #supersol-usage .usage-warp .usage-text::before{
        left: 0;
        width: 85vw;
        transform: unset;
    }
    #supersol-usage .usage-warp .usage-text h4{
        margin: 0 1rem 0 0;
    }
    #supersol-usage .usage-warp .usage-photo{
        height: 170px;
        width: 70%;
    }
    #supersol-usage .usage-warp .usage-photo:nth-child(2){
        margin-left: auto;
    }
    #supersol-usage .usage-warp .usage-photo:nth-child(2){
        border-radius: 0 0 0 10px;
    }
    #supersol-usage .usage-warp .usage-text:nth-child(2) {
        margin-left: auto;
        width: 90%;
    }
    #supersol-usage .usage-warp .usage-text:nth-child(2)::before{
        transform: unset;
        left: 0;
        right: auto;
        width: 100%;
    }

    #supersol-usage .usage-warp.nougyo .usage-photo,
    #supersol-usage .usage-warp.jousui .usage-photo{
        order: 2;
    }

    .footer-nav{
        display: block;
    }

    .footer-nav-item{
        margin: 1rem 0;
    }
    .footer-banner{
        max-width: 90%;
        text-align: center;
    }

    .footer-contact-wrap{
        display: block;
    }

    .price-list-item {
        margin: 1rem 0;
        width: 100%;
    }
    .price-list-item > *{
        text-align: center;
    }

    .content-wrap .content-md-wrap{
        padding: 0;
    }

    .slick-prev, .slick-next{
        z-index: 999;
    }
    .slick-next{
        right: 16px;
    }

    .slick-prev{
        left: 16px;
    }

    .modal-open{
        margin: 0;
        padding: 1rem;
    }

    .modal-container{
        padding: .5rem;
        width: 95%;
    }

    .header-1{
        font-size: 1.3rem;
        padding: 0.5rem 25px;
        text-align: left;
    }
    .header-1 br{
        display: none;
    }
    .header-1-string{
        font-size: 1.1rem;
        text-align: left;
    }
    .header-3{
        font-size: 1.1rem;
        text-align: left;
    }

    .page-content h3{
        display: block;
        font-size: 1.3rem;
        padding: 1rem 25px;
        text-align: left;
    }

    .page-content img{
        display: block;
        margin: auto;
    }

    .page-content table.flex-box.sp-md-col-3 td,
    .page-content table.flex-box td,
    .page-content table td{
        display: block;
        width: 100% !important;
    }
    .page-content table.flex-box td{
        padding: 0;
    }

    .page-content table.flex-box.border-brown,
    .page-content table.flex-box.border-green,
    .page-content table.flex-box.border-yellow,
    .page-content table.flex-box.border-blue{
        padding: 1rem 1rem 0;
    }

    .page-content table td h3{
        display: block;
    }

    .page-content table.flex-box.bg-gray{
        width: 100% !important;
    }
    .page-content table.flex-box.bg-gray::before{
        left: -1rem;
    }

    .page-content table:not(.flex-box) > tbody > tr > th{
        padding: .5rem 1rem;

    }
    .page-content table:not(.flex-box) > tbody > tr > th,
    .page-content table:not(.flex-box) > tbody > tr > td{
        display: block;
        width: 100% !important;
    }

    .page-content table:not(.flex-box) tr:nth-child(2n+1){
        background-color: transparent;
    }
    .page-content table:not(.flex-box) > tbody > tr > td{
        border-bottom: 1px solid #eee;
    }

    .footer-wrap{
        padding-top: 25px;
    }
    .footer-wrap::before{
        width: 1000px;
        height: 90px;
        background-size: 1000px;
        background-repeat: no-repeat;
    }

}