@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;
}





/*TopIntro-Start*/
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
background:rgba(255,255,255,0);
  text-align:center;
  font-size:20px;
  font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #2b2b2b;
		 -webkit-text-size-adjust: 100%;
}


/*ファーストビュー*/
.head{     background:url(../images/headbg2.png), url(../images/head-bg.jpg);
    background-position: center;
    background-size:auto, cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  padding:100px 0 1em;
}
.top{padding:10px;
    width: 100%;
box-shadow: 0 0 2px #545454;
    position: fixed;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2281d3+0,2e9ed4+51,32a9d5+100 */
background: #2281d3; /* Old browsers */
background: -moz-linear-gradient(left,  #2281d3 0%, #2e9ed4 51%, #32a9d5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #2281d3 0%,#2e9ed4 51%,#32a9d5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #2281d3 0%,#2e9ed4 51%,#32a9d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2281d3', endColorstr='#32a9d5',GradientType=1 ); /* IE6-9 */
z-index:999;
}
.topa{width:15%;}
.topb{width:65%;
border-left: 1px solid #fff;
padding-left: 10px;}
.topc{width:20%;}
.top img{margin:0;}
.top2{background:url(../images/top2-bg.jpg);
background-size: 100% auto;
background-position: center;
padding:100px 0 15px;}
.top2 img{margin: 0 auto;}
.topin{    display: flex;
    justify-content: flex-start;
    max-width: 1100px;
    margin: 0 auto;}
.topimga{    width: 144px;
    height: 43px;

    vertical-align: middle;
position: relative;
    top: 10px;
}
.topimgc{float:right;}
/*ファーストビュー　ここまで*/

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

}
img{ border: none;
display: block;
max-width:100%;
height:auto;
margin:1.5em auto;}
.sec16bg .sub{margin-bottom:2em;}
.head-img2{position: relative;
left:19px;}
.imgm4{margin:4em auto 0;}
.imgm6{margin:6em auto 0;}
.imgm0{margin:0em auto 0;}
.imgb0{margin:1.5em auto 0;}
.imgb2{margin:1.5em auto 2em;}
.text{  font-size: 36px;
    font-weight: 600;
    width: 850px;
    padding: 0;
    margin: 0 auto;
    /* background: #fff; */
    border-radius: 3px;
    line-height: 150%;
    text-shadow: 0 0 3px #fff, 1px 0 5px #fff, -1px 0 5px #fff;}
.textw{color:#fff !important;
text-shadow: 0 0 3px #000, 1px 0 5px #000, -1px 0 5px #000 !important;
}
.lll{font-size:1.3em;
line-height: 150%}
p{margin-bottom: 1.5em;}
#container {

	text-align:left;
	margin:0 auto;


}


.input{    width: 70%;
    max-width: 750px;
    display: block;
    margin: 0em auto 0;
    font-size: 2em;
    border: 5px solid #7d7d7d;
    padding: 0.3em 1em;
text-align: center;
}
.top{padding:10px;
    width: 100%;
    position: fixed;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2281d3+0,2e9ed4+51,32a9d5+100 */
background: #2281d3; /* Old browsers */
background: -moz-linear-gradient(left,  #2281d3 0%, #2e9ed4 51%, #32a9d5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #2281d3 0%,#2e9ed4 51%,#32a9d5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #2281d3 0%,#2e9ed4 51%,#32a9d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2281d3', endColorstr='#32a9d5',GradientType=1 ); /* IE6-9 */

}


.form{
background-size: 100% auto;
background-position:center;
padding:2em 0;
background-attachment:fixed;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2281d3+0,2e9ed4+51,32a9d5+100 */
background: #2281d3; /* Old browsers */
background: -moz-linear-gradient(left,  #2281d3 0%, #2e9ed4 51%, #32a9d5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #2281d3 0%,#2e9ed4 51%,#32a9d5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #2281d3 0%,#2e9ed4 51%,#32a9d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2281d3', endColorstr='#32a9d5',GradientType=1 ); /* IE6-9 */}
.sub{margin-bottom:4em;}
.sec1{background:url(../images/sec1-bg.jpg);
background-size: cover;
background-position:center;
padding:2em 0;
background-attachment:fixed;}
.sec1-1{background: url(../images/sec5-bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 4em 0;
    background-attachment: fixed;}
.sec1-yaji{    margin-top: 4em;
    margin-bottom: -4em;
}
.sec1-yaji2{     margin-top: 2em;
    margin-bottom: -3em;
}
.sec1-yaji3{    margin-top: 0em;
    margin-bottom: -4em;
}
.sec2{background:url(../images/sec6-bg.jpg);
background-size: cover;
background-position:center;
padding:2em 0;
background-attachment:fixed;
    overflow: hidden;
}
.sec3{background:#f4fff9;
background-size: cover;
background-position:center;
padding:2em 0;
background-attachment:fixed;
}
.sec4{background:url(../images/sec4-bg.jpg);
background-size:auto 100%;
background-position:center;
padding:2em 0;

}
.sec5{background:url(../images/sec5-bg.jpg);
background-size:cover;
background-position:center;
padding:2em 0;
background-attachment: fixed;
}
.sec5-2{background:#fffff4;
background-size: cover;
background-position:center;
padding:2em 0;
background-attachment:fixed;
}
.sec6{background:;
background-size: cover;
background-position:center;
padding:2em 0;
}
.sec7{background:url(../images/sec6-bg.jpg);
background-size: cover;
background-position:center;
padding:2em 0;
background-attachment:fixed;
}
.sec8{background:url(../images/sec1-bg.jpg);
background-size: cover;
background-position:center;
padding:2em 0;
}
.sec9{background:url(../images/sec5-bg.jpg);
background-size:cover;
background-position:center;
padding:2em 0;
background-attachment: fixed;
}
.sec10{background:;
background-size: cover;
background-position:center;
padding:2em 0;
}
.sec11{background:;
background-size: cover;
background-position:center;
padding:2em 0;
}
.sec12{background:url(../images/sub12-bg.jpg);
background-size: cover;
background-position:center;
padding:2em 0;
background-attachment:fixed;
}
.sec13{background:url(../images/sec13.jpg);
background-size: cover;
background-position:center;
padding:2em 0;
background-attachment:fixed;
}
.sec14{ background:url(../images/headbg2.png), url(../images/head-bg.jpg);
    background-position: center;
    background-size:auto, cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
padding:2em 0;
}

.sec15{background:;
background-size: cover;
background-position:center;
padding:2em 0;
}
.sec16{ background:url(../images/sec16.jpg);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
padding:2em 0;
}
.sec17{background:url(../images/sec17-bg.jpg);
background-size: cover;
background-position:center;
padding:2em 0 0;
background-attachment:fixed;
}
.bgw{background:rgba(255,255,255,0.6);
width:100%;
padding:1em 0;}
.sec172{    background:rgb(66 191 211 / 52%);
    background-size: cover;
    background-position: center;
    padding: 1.5em 0;
    background-attachment: fixed;
}
.sec18{ background:url(../images/headbg2.png), url(../images/head-bg.jpg);
    background-position: center;
    background-size:auto, cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
padding:2em 0;
}
.sec19{background:url(../images/sec19-bg.jpg);
background-size: cover;
background-position:center;
padding:2em 0;
background-attachment: fixed;
}
.sec20{background:#f2f2f2;
background-size: cover;
background-position:center;
padding:2em 0;
}
.sec21{background:url(../images/sec21-bg.jpg);
background-size: auto;
background-repeat:repeat;
background-position:top center;
padding:0 0 2em 0;
background-attachment: fixed;
}

.sec22{
background-size: cover;
background-position:center;
padding:2em 0;
}
.sec1bg1{background: url(../images/sec2-bg1-1.png);}
.sec1bg2{background: url(../images/sec2-bg1-2.png);}
.sec1bg3{background: url(../images/sec2-bg1-3.png);}
.sec1bg4{background: url(../images/sec2-bg1-4.png);}
.sec1inl{
    background-size: cover;
    background-position: center;
    padding: 1em 0 2em;
    position: relative;
    left: -15%;
}
.sec1inr{
    background-size: cover;
    background-position: center;
    padding: 1em 0;
    position: relative;
    right: -15%;
}

.sec1inl img, .sec1inr img, .sec1inl p, .sec1inr p{margin:0 auto ;
line-height: 150%;}
.sec6box{    display: flex;
 justify-content: space-around;
 align-content: space-between;
  flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}
.sec6box img{max-width: 100%;
margin: 0 auto;
width: 33%;
height:auto;}
.textsec1 {text-align: left;
    background: rgba(255,255,255,0.9);
    max-width: 480px;
    padding: 1em;
    margin: 1em auto 0;
}
.textsec13{    width: 800px;
    margin: 0 auto 1.5em;
    text-align: left;
    background: rgba(255,255,255,0.95);
    border: 5px solid #32a8d5;
    padding-top: 1em;
}
.textsec13 p{    padding: 0 2em;
    font-size: 24px;
    font-weight: 500;
line-height: 150%;}
.sec13sub{margin:0 0 1em;}
.sec16bg{background: #1c4e8a;
    padding: 1em 0;
    margin: 0 auto;
    width: 900px;
}

.sec16in{ width: 775px;
    margin: 0 auto 1.5em;
    text-align: left;
    background: rgba(255,255,255,0.95);
font-size: 24px;
font-weight: 500;
    padding: 1em;
line-height: 150%;
}
/* layout
---------------------------------------------*/

.c{color:#ff0000;}
.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) 70%, rgb(244, 255, 77) 30%);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 2.5s;
}

.right{float:right;}

ol,
ul{
	list-style-position: inside;
	padding-left:10px;
}
ol li,
ul li{
	text-align:left;
}
/*スライダー*/
li{list-style: none;}
.loopSlider li{padding:0 20px;}
.slider img{background:000;}
.loopSlider{
	height: 218px;
	overflow: hidden;
	position: relative;
}
.loopSlider .loopslider_wrap{
	height: 218px;
	display: -webkit-flex;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
}
.loopSlider .loopslider_wrap ul{
	display: -webkit-flex;
	display: flex;
}
.loopSlider .loopslider_wrap ul li{
	width: 272px;
}

.reflection-img{margin:0 auto;
border-radius: 7px;

    width       :664px;
    height      :186px;
    position    :relative;
    overflow    :hidden;
}

.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;
}

@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; }
}

footer{font-size:0.7em;
padding-top:1em;
background:#fff;}
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:4.5vw;}
.sub{max-width: 90%;
margin-bottom:7vw;}
.pc{display:none;}
footer br{display:inherit;}
input{max-width:90%;
display:block;}
img{margin:4vw auto;}
.text {
    font-size: 4.5vw;}
.imgsp96{max-width: 96%;}
.imgsp90{max-width: 90%;}
.imgsp80{max-width: 80%;}
.imgsp75{max-width: 75%;}
.imgsp70{max-width: 70%;}
.imgsp60{max-width: 60%;}
.imgsp50{max-width: 50%;}
.imgsp30{max-width: 30%;}
.top {
    padding: 2vw;
    width: 96vw;}
.topa {
    width: 19%;}
.topb {
    width: 55%;}
.topc {
    width: 40%;}
.head{    padding: 14vw 0 0vw;}
.topimga {
    width: 13vw;
    height: auto;}
.topimgb{max-width: 48vw;
height:auto;}
.topimgc{    max-width: 28vw;
    padding-top: 1vw;}
.head-img2 {
    position: relative;
    left: 4vw;
    max-width: 18vw;
    margin: 2vw auto;
}
#container{width: 100%;}
	.input {
    width: 85%;
    font-size: 1em;}
	.l{    font-size: 1.13em;}
	.ll{    font-size: 1.2em;}
	.text{max-width:94vw;
	padding:2vw;}
.head{
    background: url(../images/headbgsp2.jpg);
    background-position: center;
background-size: 100% 100%;
    background-repeat: no-repeat;
}
.sec14, .sec18{
  background: url(../images/head-bgsp.jpg);
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
.imgspm7{margin:7vw auto;}
.imgm6{margin:15vw auto 0;}
.form, .sec1, .sec2, .sec3, .sec4, .sec5, .sec6, .sec7, .sec8, .sec10, .sec11, .sec12, .sec13, .sec14, .sec15, .sec16, .sec18, .sec19, .sec20, .sec21, .sec22, .sec23, .sec5-2{padding:2vw 0;}
.sec9{padding:6vw 0 6vw;}
.textsec13 {
    width: 90vw;
    border: 3px solid #32a8d5;
    padding-top: 1em;
}
.sec13sub{max-width: 70%}
.sec16bg {
    width: 96vw;}
.sec16in {
    width: 86vw;
    margin: 0 auto 0;
    font-size: 4.5vw;
    padding: 2vw;
}
.sec172{padding:2vw 0 2vw;}

.sec172 img{margin:0;}
.right {
    float: right;
    max-width: 35%;
}
.textsec13 p {
    padding: 0 2vw;
    font-size: 4.5vw;}
.head::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    height: 100vh;
    background: url(../images/head-bgsp.jpg) center/cover no-repeat;
    -webkit-background-size: cover;
z-index:-1;
overflow: hidden;
  }
.sec1{background: url(../images/sec1-bgsp.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}
.sec1-1{background: url(../images/sec5-bgsp.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}
.sec2{background: url(../images/sec6-bg.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}

.sec3{
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}
.sec4{background: url(../images/sec4-bg.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}
.sec5{background: url(../images/sec5-bgsp.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}

.sec6{background:#fff;
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}

.sec7{background: url(../images/sec6-bgsp.jpg);
background-size: 100% auto;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}

.sec8{background: url(../images/sec1-bgsp.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}

.sec9{background: url(../images/sec5-bgsp.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}

.sec12{background: url(../images/sub12-bg.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}

.sec13{background: url(../images/sec13-bgsp.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}
.sec16{background: url(../images/sec16.jpg);
background-size:100% auto;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}
.sec17{background: url(../images/sec17-bgsp.jpg);
background-size:auto 100%;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}
.sec19{background: url(../images/sec19-bg.jpg);
background-size:auto 100%;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}
.sec20{
background-attachment: scroll;}
.head4{position: relative;
left:-4vw;}
.sec21{background: url(../images/sec21-bg.jpg);
background-size:auto 100% ;
background-repeat:repeat;
background-position: center;
background-attachment: scroll;}
.head4{position: relative;
left:-4vw;}



.sec1inl img{    max-width: 60%;
    margin: 0 0 0 4vw;}
.sec1inr img{    max-width: 60%;
    margin: 0 0 0 24vw;}
.sec1inr .textsec1{margin: 1em 0 0 24vw;}
.textsec1 {
        max-width: 70%;
    padding: 2vw;
      margin: 1em 0 0 4vw;
    font-size: 3.5vw;
}

.sec1inl {
    background-size: 100% 100%;
    background-position: center;
    padding: 4vw 0 4vw;
    position: relative;
    left: 0%;
}
.sec1inr {
    background-size: 100% 100%;
    background-position: center;
    padding: 4vw 0 4vw;
    position: relative;
    right: 0%;
}
.loopSlider li{padding:0 3vw;}

.loopSlider{
	height: 36vw;

}
.loopSlider .loopslider_wrap{
	height: 36vw

}

.loopSlider .loopslider_wrap ul li{
	width: 40vw;
}
.reflection-img{    width: 80vw;
    height: 22vw;}
.sec6box img {
    max-width: 100%;
    margin: 0 auto;
    width: 33%;
    height: 31.5vw;
}
.sec1-yaji {
    margin-top: 11vw;
    margin-bottom: -10vw;
}
.sec1-yaji2 {margin-top: 0vw;
    margin-bottom: -5vw;
}
.sec1-yaji3 {
    margin-top: 0vw;
    margin-bottom: -10vw;
}
.sec1-1 {

    padding: 8vw 0;}
.lll{font-size:1.3em;
line-height: 150%}
}