@charset "utf-8";

/*
Theme Name: SUBHAND
Author: SUBHAND.LLC
Author URL: http://www.subhand.net/
*/


/* common
---------------------------------------------*/
* {margin:0;padding:0;}

a:link,a:visited {
	color: #2236cf;
	text-decoration:underline;
}
a:hover,a:active {
	color: #d90909;
	text-decoration:underline;
}

/* noto-serif-jp-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/noto-serif-jp-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-serif-jp-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-serif-jp-v21-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/noto-serif-jp-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-serif-jp-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/noto-serif-jp-v21-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/*TopIntro-Start*/
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
  text-align:center;
 scroll-behavior: smooth;
  font-size:20px;
line-height: 150%;
font-weight: 600;
  font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:url(../images/k-bg.jpg);
	background-size: cover;
	background-attachment: fixed;
}

img{display:block;
	margin:1.5em auto;
height:auto;}

/*ファーストビュー*/

.top{    background: url(../images/top-bg.png);
    background-size: cover;
background-position: bottom center;
color:#fff;
padding:1em 0;
margin-bottom:1.5em;
}
.top-img{    padding-top: 75px;
    margin-bottom: 75px;}
.top-text{    background: rgba(255,255,255,0.9);
    width: 900px;
    max-width: 90%;
    color: #06265d;
    border: 1px solid #06265d;
    margin: 0 auto 1.5em;
    padding: 1em 0;}
.top h2{font-weight: 500;
font-size:48px;
line-height: 150%;
}
.k-h2::after{content: '';
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 100px;
    height: 1px;
    background: #fff;
    left: 20px;
    top: -3px;}
.k-h2::before{content: '';
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 100px;
    height: 1px;
    background: #fff;
    right: 20px;
    top: -3px;}
/*ファーストビュー　ここまで*/

body {
  /* フォントレンダリング設定: 1x解像度ではsubpixel、2x以上の解像度ではgrayscale */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;

}
#wrap {

}
.text{    width: 850px;
    padding: 25px;
text-align: center;
    margin: 1.5em auto;
    background: #fff;
    border-radius: 3px;
		line-height: 150%;
    max-width: 90%;}

.text-center{text-align: center;}
.font-size30{font-size:30px;}
.k-sub-text{font-size:48px;
    font-weight: 600;
    text-align: center;
}

.gradation {
  background: linear-gradient(90deg, #bb8829, #bb8829 18%, #fbf3a7);
  background: -webkit-linear-gradient(90deg, #bb8829, #bb8829 18%, #fbf3a7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
p{margin-bottom: 1.5em;
line-height: 150%;}
#container {

	text-align:left;

	margin:0 auto;


}






/* layout
---------------------------------------------*/

.c{color:#b64121;}
.b{font-weight:bold;}
.y{background-color: #ffff66;}
.l{font-size:1.2em;    line-height: 130%;}
.ll{font-size:1.5em;    line-height: 130%;}
.u {  text-decoration: none;
background: linear-gradient(rgba(255, 204, 255,0) 80%, rgb(255, 244, 171) 20%);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 2.5s;
}
.ls2{font-size:0.35em;    line-height: 130%;}
.ls3{font-size:0.9em;    line-height: 130%;}
.ls4{padding-right:0.3em;}
img{ border: none;
max-width:100%;
margin:0 auto;}
.img-pt15{padding-top:0.5em;}
.img-mt15{padding-top:1.5em;}
.img-mb15{margin-bottom:1.5em;}
.mtb1{margin-bottom:20px;}
.box{background:#6e031e;
    width: 890px;
    max-width: 96%;
    margin: 0 auto;
padding-top:75px;
padding-bottom:30px;
border:6px solid #b88323;
margin-bottom:1.5em;}
.box2{background:#06265d;
    width: 900px;
    max-width: 96%;
    margin: 0 auto;

padding-bottom:30px;
border:2px solid #fff;
margin-bottom:1.5em;}
.text-box{    background: #fff;
font-size:18px;
    width: 840px;
max-width: 85%;
    margin: 0 auto 1.5em;
    padding: 40px;}
.box-in{width:800px;
margin:0 auto;
padding-bottom:1.5em;}
.boxin2{padding-top:1em;
padding-bottom:1em;
border-radius: 6px;
background-image: linear-gradient(125deg, #b88323 30%, #fbf4a8 50%, #b88323 70%);
width: 90%;
margin:0 auto ;
 position: relative;
border:5px solid #4e0216;
}
.boxin3-tex1{        font-size: 48px;
    background: #fae805;
padding:0 0.4em ;

}
.boxin3 .boxin3-tex2{    position: relative;
left:20px;
line-height: 180%;

}
.boxin3 .boxin3-tex2..boxin3 .boxin3-tex2b{left:10px;}
.boxin3-tex2 .number{font-size:1.6em;}
.boxin3-tex2.boxin3-tex2b .number{font-size:1.25em;}
.boxin3-tex2{    margin-top: 20px;
font-size: 72px;
margin-bottom:0;
color:#fff;
text-align: center;
font-weight:900;
}
.bunkatu .boxin3-tex2{color:#fff;
line-height: 200%;}
.k-sub{margin-bottom:-52px;}
.k-sub2{  background-image: linear-gradient(125deg, rgba(182, 65, 33, 1) 30%, rgba(224, 107, 75, 1) 50%, rgba(182, 65, 33, 0.98) 70%);
max-width: 90%;
    color: #fff;
    text-align: center;
    font-size: 36px;
    padding: 0.5em;
    margin:0 auto 1.5em ;}
.k-sub3{  background:#fff;
  max-width: 90%;
	    color: #06265d;
	    text-align: center;
	    font-size: 36px;
	    padding: 0.5em;
	    margin:1.5em auto 1em ; }
.k-sub-text{margin-bottom: 1em;
margin-bottom:0.5em;}
.content{
font-size:36px;
color:#06265d;
margin-bottom:0em;
}
.content::after{content:'';
}
.content-text{    background: #fff;
    padding: 0.2em 1em 0.2em 1.5em;
}
.content::before{content: '';
    display: inline-block;
    width: 97px;
    height: 97px;
    vertical-align: middle;
    margin-right: -48px;
    top: -6px;
    position: relative;
    z-index: 5;}
.content1::before{content: '';
    background: url(../images/k-c1-img1.png);
    background-size: 100%;}
.content2::before{content: '';
    background: url(../images/k-c1-img2.png);
    background-size: 100%;}
.content3::before{content: '';
    background: url(../images/k-c1-img3.png);
    background-size: 100%;}
.content4::before{content: '';
    background: url(../images/k-c1-img4.png);
    background-size: 100%;}
.content5::before{content: '';
    background: url(../images/k-c1-img5.png);
    background-size: 100%;}
.price1{    color: #fff;
    text-align: center;
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 1em;}
.price-l1{font-size:2em;}
h3{width:600px;
background:#e4e4e4;
font-size:24px;
text-align: left;
padding:1em 1em 1em 2em;
margin:0 auto;
    position: relative;
}
.h3-dv{    background: #fff;
    color: #6e031e;
margin-top:2em;}
.box2 .h3-dv{    background: #fff;
    color:#06265d;
margin-top:2em;}
h3::before{    content: "";
    display: inline-block;
    width: 5px;
    height: 52px;
    position: absolute;
    top: 0;
    left: 15px;
    background: #6e031e;
}
.box2 h3.h3-dv::before{    content: "";
    display: inline-block;
    width: 5px;
    height: 52px;
    position: absolute;
    top: 0;
    left: 15px;
    background: #06265d;
}
.h4-bg3-2{ max-width: 93%;
    margin: 1em auto 0;   font-size: 30px;
    display: block;
    position: relative;
		text-align: center;
    line-height: 160%;
	color:#fff;
    padding: 0.2em 0;

}
.border{border-top:3px solid ;
border-bottom:3px solid ;
border-image: linear-gradient(to right, #c08b2c 0%, #ffd992 50%, #c08b2c 100%) 1;
padding:1em;}
.h4-bg3-2 .border{padding: 1em 0;}
.reflection-img{
    width       :580px;
    height      :126px;
    position    :relative;
    overflow    :hidden;
	margin:1.5em auto;
		border-radius: 16px;
}

.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2s ease-in-out infinite;
}
.reflection-img:hover{opacity: 0.8;
animation-duration: 2s;
}
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
ol,
ul{
	list-style-position: inside;
	padding-left:10px;
}
ol li,
ul li{
	text-align:left;
}

.fuwafuwa {
 -webkit-animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
 -webkit-animation-duration:2s;
 -webkit-animation-iteration-count:infinite;
 /*-webkit-animation-direction:alternate;*/
 -webkit-animation-timing-function:ease;

 -moz-animation-name:fuwafuwa;
 -moz-animation-duration:2s;
 -moz-animation-iteration-count:infinite;
 /*-moz-animation-direction:alternate;*/
 -moz-animation-timing-function:ease;
}
/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwafuwa {
 0% {-webkit-transform:translate(0, 0);}
 50% {-webkit-transform:translate(0, -10px);}
 100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
 0% {-moz-transform:translate(0, 0);}
 50% {-moz-transform:translate(0, -10px);}
 100% {-moz-transform:translate(0, 0);}
}


footer{font-size:0.7em;
padding-top:1em;}
footer a{    text-decoration: none !important;
    color: #252525 !important;}
@media only screen and
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
@media screen and (min-width: 751px){
.sp{display:none;}
}
@media screen and (max-width: 750px){
	body{font-size:4vw;
background: url(../images/k-bg-sp.jpg);
    background-size:100% auto;
background-repeat: repeat;
    background-position: center;
    background-attachment: scroll;;}
.pc{display:none;}
footer br{display:inherit;}
input{max-width:90%;
display:block;}
#container{width: 100%;}
.imgsp96{max-width: 96%;}
.imgsp90{max-width: 90%;}
.imgsp80{max-width: 80%;}
.top{background-size: auto 100%;}
.top-img{    padding-top: 10vw;
    margin-bottom: 6vw;}
	.input {
    width: 85%;
    font-size: 1em;}
	.l{    font-size: 1.13em;}
	.ll{    font-size: 1.2em;}
	.text{max-width:94vw;
	padding:2vw;}
  .sec1{
    background: none;
  }
.box-in{    width: 96%;}
.content{font-size: 4.5vw;}
.content::before, .content::after{       width: 15vw;
    height: 15vw;
    margin-right: -7vw;
    top: 0vw;}
.content-text {
    background: #fff;
    padding: 0.6em 1em 0.6em 1.5em;
}
h3{    width: 70%;
    font-size: 5vw;
    padding: 4vw 10vw;}
h3::before, .box2 h3.h3-dv::before{height: 10vw;}
.top h2, .price1{font-size: 6vw;}
.k-sub-text{font-size: 7vw;}
.font-size30{font-size: 4.5vw;}
.k-h2::after, .k-h2::before{    width: 15vw;}
.box{    padding-top: 17vw;
    padding-bottom: 3vw;}
.box-in{max-width: 100%;}
.reflection-img {
    width: 90vw;
    height: 20vw;
    margin: 6vw auto;
    border-radius: 2vw;
}
.k-sub2, .k-sub3{max-width: 85%;
    font-size: 7vw;}
.text-box {
    background: #fff;
    font-size: 4vw;
    max-width: 87%;
    margin: 0 auto 1.5em;
    padding: 3vw;
}
.sp-m1{margin-top:6vw;}

element.style {
}
.boxin2 {
    width: 96%;
    padding-top: 0vw;
    padding-bottom: 0;
}
.h4-bg3-2{font-size: 5vw;
    }
.h4-bg3-2 .border{padding: 1em 0;}
.boxin3-tex2{font-size: 12vw;
}
.boxin3 .boxin3-tex2{    font-size: 11vw;
    left: 2vw
;}
.boxin3-tex2.mt1{font-size: 9vw;
    margin-top: 5vw;
    margin-bottom: 5vw;
    line-height: 150%;}
}