@charset "UTF-8";



body {
background-color:#fff;
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
      font-family: 'Open Sans', sans-serif;
}

 
@keyframes bodyFadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
 
@-webkit-keyframes bodyFadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}







#wrapper0 {
position: relative;
margin: 0 0 0px 0;
}

#wrapper {
  position: relative;
  /*width: 960px;*/
  max-width: 100%;
  height: auto;
  margin: 0 auto;   /*全体の中央寄せ*/
  /*border: 1px solid #aaa;*/
  overflow:hidden;
  /*background-color:#DDD;*/
  }


header {
display: flex;
background-color: #;
padding: 20px 0 10px 0;
margin: 0 auto; 
max-width: 960px;
}


header #head1{
margin: 0 auto; 
max-width: 760px;
}

header #head1 h1 {
margin: 20px auto; 
text-align: center;
font-size: 40px;
line-height:50px;
font-weight: 100;
color: #000;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 /* 追加 */
 transform: rotate(.03deg);
/*border-bottom : dotted  1px #20B2AA;*/
background-color:;
}



header #head1 p {
text-align: center;
}

header #head1 p img {
width: 120px;
height: auto;
}

nav.regular {
margin: 0 auto;
max-width: 960px;
background-color: #0;
 }



nav.regular ul {
  display: flex;
  /*flex-wrap: wrap;*/
  max-width: 840px;
  /*margin: 0px auto;*/
background-color: #;
 }



nav.regular ul li{
  margin: 20px 10px 20px 10px;
  padding: 0px 20px 0px 20px;
  /*box-sizing: border-box;*/
  max-width: 400px;
  /*border-top: 1px  dotted #FFF;*/
  border-left: 1px   dotted #000;
  background-color: ;
  text-align: center;
}


nav.regular ul li{
  flex: 1 1 100px;
}

nav.regular ul #only1{
 border-left: none; 
}

nav.regular ul #only1 {
  flex: 1 1 150px;
}





nav.regular ul a {
display: block;
font-size: 17px;
  color: #666;
  display: block;	
}


.PasNavul {
display: flex;
padding: 0 0 0 20px;
margin: 0 auto 10px;
max-width: 960px;
}


.PasNavli{

}

.PasNavli a{
color:#aaa;
font-size: 12px;
}

#logo1 img {
margin-left: auto;
padding-right: 20px;
width: 130px;
height: auto;
position: absolute;
  z-index: 3;
  top: 10px;
  right: 0px;
  bottom: 0px;
  /*left: 80%;*/
}



#mokuji {
margin: 0 auto;
max-width: 840px;
}

#mokuji nav.heading {
margin-left: auto;
width: 180px;
padding-right: 20px;
}

#mokuji nav.heading p {
white-space: pre-line;
display: inline-block;
padding:  0px 0px 0px 0px;
color: #666;
/*text-align: ;*/
font-size: 20px;
line-height:30px;
border-bottom : dotted  2px #666;

}

#mokuji nav.heading li {
margin: 5px 0 5px 0;
text-align: left;
}

#mokuji nav.heading li a {
display: inline-block;
white-space: pre-line;
color: #20B2AA;
font-size: 15px;
text-align: left;
/*border-bottom : dotted 1px  #FF6600;*/
}



#mokuji2 {
}



#mokuji2 nav.heading2 {
margin: 0 auto;
max-width: 840px;
text-align: center;
}

#mokuji2 nav.heading2 ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
width: 100%;
max-width: 840px;
}


#mokuji2 nav.heading2 li {
margin: 5px 0 5px 0;
/*text-align: left;*/
}

#mokuji2 nav.heading2 li a {
display: inline-block;
/*white-space: pre-line;*/
padding: 0 20px 0 20px;
color: #20B2AA;
letter-spacing: 1px;
line-height: 13px;
font-size: 13px;
/*text-align: left;*/
border-left: dotted 1px  #20B2AA;
}



nav.inDrawer {
    margin: 1.5px 0;
    padding : 0px 0px;
}

nav.inDrawer li {
/*display: block;*/
padding : 8px 0px 8px 0px;
color: #20B2AA;
font-size: 17px;
text-indent: 1em;
line-height: 30px;
font-weight: normal;
 border-bottom : dotted  1px #20B2AA;
}

nav.inDrawer li a {
color: #20B2AA;
}

nav.inDrawer li a#line {
background: linear-gradient(transparent 65%, #ffffa8 0%);
}

.content0 {
  width: 100%;
  padding: 20px 0 20px 0;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0% 80%;
 /* background-image:url(../img1/cottons3.jpg)*/
}

.content0::before {
  background: inherit;
  content: '';
  filter: blur(5px);
  position: absolute;
  z-index: 0;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}

.content {
  display: flex;
  flex-wrap: wrap; 
  max-width: 960px;
  margin: 0px auto;
}

.border {
 margin: 30px auto 30px ;
 /*height: 2px;*/
 max-width: 100%;
width: 30%;
/* background-color: #20B2AA;*/
/* text-align: right;*/
}

.border p{
 margin: 0px auto;
 max-width: 840px;
 color: #FF6600;
 font-size: 16px;
 border-bottom: 1px dotted #20B2AA;
}



#section5 {
  margin: 0 auto;
  padding-bottom: 150px;
  background-image: url(../img1/jinTop1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  max-width: 960px;
  height: 60px;
}


#section5 h2 {
text-align: center;
font-size: 28px;
}


#section0 #a2{
 margin: 3px 0 0 0;
padding: 0 0 0px 0;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imga1/productTop6.png");
 background-color:#fff;
 box-shadow: 0 0 8px rgba(0,0,0,.3);
}


#section0 #b2{
margin: 0 auto;
position: relative;
max-width: 960px;
/*background-color: rgba(255,255,255,0.3);*/
}


#section0 #logo4 {
margin: 0px auto;
padding-top: 10px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 10px;
width: 100px;
/*background-color: rgba(255,255,255,0.8);*/
}

#section0 #logo4 img {
  display: block;
  padding: 0px;
  width: 100px;
  height: auto;
/*background-color: rgba(255,255,255,0.8);*/
/*border-radius: 20px 20px 20px 20px;*/
}


.Qcot {
  margin: 50px 0 30px 0;
  display: flex;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.Qcotin{
display: flex;
margin: 0 auto;
width: 960px;
align-items: flex-start;

}

.Qcotin h1 {
padding:  15px 10px 20px 10px;
 color: #FF6600;
/*text-indent: 1em;*/
text-align: center;
font-size: 35px;
line-height:35px;
/*border-bottom : dotted  2px #FF6600;*/
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


.hakumark {
box-shadow: 0 0 8px rgba(0,0,0,.3);
}

.hakumark #logo5 img {
display: block;
margin: 0px auto 0px;
padding: 10px 0 10px 0;
width: 90px;
}



.proflex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 30px auto 0;
max-width: 960px;
background-color:;
}


.proflex .proBox {
margin: 0 0 100px 0;
flex: 0 1 24%;
height: 250px;
/*border: 1px solid #ddd;*/
background-repeat: no-repeat;
background-size: 90%;
background-position: center;

}

.proflex .proBox .aTop {
display: block;
width: 100%;
height:100%;
background-color:;
border: 1px solid #ddd;
}

.proflex .proBox .aBott{
display: block;
/*margin: 133px 0 0 0;*/
padding-top: 5%;
width: 100%;
height: 24%;
color: #666;
text-align: center;
font-size: 15px;
/*background-color: rgba(255,255,255,0.5);*/
}




.Rap {
 margin: 20px auto 20px;
 max-width: 840px;
 height: auto;
 /*background-color:#bbb;*/
}


.R_textall {
 margin: 0px 0 0px 0px;
 padding: 10px 0px 10px 0px;
 max-width: 840px;
/* width: calc(100% - 40px);*/
 /*height: auto;*/
 /*background-color:#eee;*/
}


.R_textall .R_text {
margin: 20px 0 0px 0;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #666;
font-size: 16px;
line-height: 30px;
}

.texth2 {
display :inline-block;
max-width: 840px;
margin: 0px 0 0 0px;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #000;
font-size: 20px;
line-height: 40px;
text-indent: ;
border-bottom: dotted 1px #888;
}

.texth2line {
display :inline-block;
max-width: 840px;
margin: 0px 0 0 0px;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #000;
font-size: 20px;
line-height: 30px;
text-indent: ;
background: linear-gradient(transparent 65%, #ffffa8 0%);
}


.R_textall .texth3 {
max-width: 840px;
margin: 10px 0 0 0px;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #aaa;
font-size: 18px;
line-height: 30px;
text-indent: ;
}

.Rapa {
 margin: 0px auto 0px;
 max-width: 840px;
 height: auto;
/* background-color:#ddd;*/

}


.R_textalla {
 margin: 0px auto;
 padding: 0px 0px 0px 0px;
 max-width: 840px;
 /*width: calc(100% - 20px);*/
 /*height: auto;*/
 /*background-color:#eee;*/
}

.R_textalla .R_texta {
margin: 20px 0 0px 0;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #666;
font-size: 16px;
line-height: 30px;
}

.texth2a {
display :inline-block;
max-width: 840px;
margin: 10px 0 0 0px;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #000;
font-size: 18px;
line-height: 40px;
text-indent: ;
border-bottom: dotted 1px #888;
}


.Rapb {
 margin: 0px auto 0px;
 max-width: 100%;
 height: auto;
/* background-color:#ddd;*/

}


.R_textallb {
 margin: 10px 0 0 5px;
 padding: 10px 10px 10px 20px;
 max-width: 840px;
 /*width: calc(100% - 20px);*/
 /*height: auto;*/
 /*background-color:#eee;*/
}

.R_textallb .R_textb {
margin: 10px 0px 0px 0px;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #666;
font-size: 16px;
line-height: 30px;
}

.texth2b {
display :inline-block;
max-width: 840px;
margin: 0px 0 0 0px;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #000;
font-size: 18px;
line-height: 40px;
text-indent: ;
border-bottom: dotted 1px #888;
}


.RapCon {
 margin: 20px auto 20px;
 max-width: 840px;
 height: auto;
 /*background-color:#ddd;*/
}

.texth2Con {
display :inline-block;
max-width: 840px;
margin: 0px 0 0 20px;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #000;
font-size: 20px;
line-height: 40px;
text-indent: ;
border-bottom: dotted 1px #888;
}


.R_textallCon {
 display: flex;
 flex-wrap: wrap;
 margin: 0px 0 0px 0px;
 padding: 10px 0px 10px 0px;
 max-width: 840px;
/* width: calc(100% - 40px);*/
 /*height: auto;*/
 /*background-color:#eee;*/
}

.Con {
margin: 0px 5px 3px 5px;
flex: 1 1 250px;
background-color: ;
/*width: calc(100% - 40px);*/
/*max-width: 840px;*/
border: dotted 1px #FF6600;
border-radius: 3px;
}

.Conin {
margin: 10px 20px 10px 20px;
}

.R_textallCon .texth3Con {
/*max-width: 840px;*/
margin: 0px 0 0 0px;
/*white-space: pre-line;*/
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #FF6600;
font-size: 18px;
line-height: 30px;
text-indent: ;
}

.R_textallCon .R_textCon {
margin: 0px 0 0px 0;
/*white-space: pre-line;*/
letter-spacing: 2px;
padding: 0px 0 0px 0;
/*width: 100%;*/
color: #666;
font-size: 16px;
line-height: 30px;
}




#a3{
 margin: 3px auto 0;
 /*padding-bottom: 300px;*/
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgb/imgb_9.png");
 /*background-color:#fff;*/
/*border: dotted 1px #FF6600;*/
}

#a3 #a3in {
padding-bottom: 300px;
 max-width: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, #fff);
}




.wrapper01 {
 display: flex;
 flex-wrap: nowrap;
 margin: 3px auto 0;
max-width: 840px;
box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
}

.wrapper12 {
  width: 100%;
  }


.wrapper22 {
  width: 100%;
margin: 0 0 0 3px;
  }


#hero12 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
 background-image : url("../img1/imgc1/imgc_1.png");
}

#hero22 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
  background-image : url("../img1/imgc1/imgc_3.jpg");
}


#hero32 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
 background-image : url("../img1/imgc1/imgc_4.jpg");
}

#hero42 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
  background-image : url("../img1/imgc1/imgc_5.jpg");
}


#a4{
 margin: 3px auto 0;
 /*padding-bottom: 300px;*/
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB3/.png");
 background-color:#fff;
}

#a4 #a4in {
padding-bottom: 300px;
 max-width: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, #fff);
}

#a11{
 margin: 3px auto 0;
 padding-bottom: 300px;
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imga1/imga1_14.png");
 background-color:#fff;
}


#a12{
 margin: 3px auto 0;
 padding-bottom: 300px;
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgb/imgb_5.png");
 background-color:#fff;
}


 #hero52 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
 background-image : url("../img1/imgB3/imgB3_2.png");
}

#hero62 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
  background-image : url("../img1/imgB3/imgB3_1.png");
}


#hero72 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
 background-image : url("../img1/imgB2/imgB2_10.png");
}

#hero82 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
  background-image : url("../img1/imgB2/imgB2_5.png");
}


#hero92 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
 background-image : url("../img1/imgB2/imgB2_8.png");
}

#hero102 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
  background-image : url("../img1/imgB2/imgB2_9.png");
}


#hero112 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
 background-image : url("../img1/imgB2/imgB2_11.png");
}

#hero122 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
  background-image : url("../img1/imgB2/imgB2_13.png");
}


#hero33 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
 background-image : url("../img1/imgB3/imgB3_1.png");
}

#hero43 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
  background-image : url("../img1/imgB3/imgB3_5.png");
}

#hero53 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
 background-image : url("../img1/imga1/imga1_15.png");
}

#hero63 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
  background-image : url("../img1/imga1/imga1_8.png");
}

#hero73 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
 background-image : url("../img1/imgb/imgb_1.png");
}

#hero83 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(250px + (250 - 250) * (100vw - 600px) / (1200 - 600));
  background-image : url("../img1/imgb/imgb_6.png");
}


#a13{
 margin: 3px auto 0;
 padding-bottom: 300px;
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB3/imgB3_4.png");
 background-color:#fff;
}


#a14{
 margin: 3px auto 0;
 padding-bottom: 300px;
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB2/imgB2_12.png");
 background-color:#fff;
}


#a15{
 margin: 3px auto 0;
 padding-bottom: 400px;
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB3/imgB3_2.jpg");
 background-color:#fff;
}

#a16{
 margin: 3px auto 0;
 padding-bottom: 400px;
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB4/imgB4_4.png");
 background-color:#fff;
}

#a17{
 margin: 3px auto 0;
 padding-bottom: 400px;
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB4/imgB4_8.png");
 background-color:#fff;
}

#a18{
 margin: 3px auto 0;
 padding-bottom: 400px;
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB4/imgB4_2.png");
 background-color:#fff;
}

#a5{
 margin: 3px auto 0;
/* padding-bottom: 300px;*/
 max-width: 100%x;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB3/imgB3_4.png");
 background-color:#fff;
/* border-bottom : dotted  1px #20B2AA;*/
}

#a5 #a5in {
padding-bottom: 300px;
 max-width: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, #fff);
}

#a6{
 margin: 3px auto 0;
 /*padding-bottom: 400px;*/
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB3/imgB3_5.png");
 background-color:#fff;
}

#a6 #a6in {
padding-bottom: 300px;
 max-width: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, #fff);
}

#a7{
 margin: 3px auto 0;
 /*padding-bottom: 400px;*/
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB3/imgB3_3.png");
 background-color:#fff;
}

#a7 #a7in {
padding-bottom: 300px;
 max-width: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, #fff);
}


.rayar {
margin: 0 auto;
max-width: 840px;
 position: relative;
}

.RapRap {
margin: 0px 0 0 0;
}



#Qcot {
  margin: 0px auto 15px;
  display: flex;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  max-width: 920px;
}



#Qcotin{
margin: 120px 0 0 0;
text-align: left;
}



#Qcotin h1 {
padding:  0px 10px 10px 10px;
 color: #20B2AA;
text-indent: 1em;
font-size: 28px;
/*line-height:40px;*/
border-bottom : dotted  2px #20B2AA;
/*font-weight: 600;*/

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /* 追加 */

background: linear-gradient(to bottom, rgba(255,255,255,0) 60%, #fff );
}


#Blog {
  margin: 20px auto 10px;

}

#Blogin{
margin: 0px auto;
max-width: 960px;
}

#Blogin h1 {
padding:  120px 10px 40px 10px;
 color: #20B2AA;
text-align: center;
font-size: 28px;
line-height:28px;
border-bottom : dotted  #20B2AA;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /* 追加 */
}



.row-big-card1 .cont1 {
   margin: 10px 0 0 0;
   position: relative;
}

.row-big-card1 .cont1 .card-inner1 .inner-text1{
 margin: 20px 0 0 0;
}

.row-big-card1 .cont1 .card-inner1 {
	    padding: 0 20px 10px;
	    position: relative;
	    z-index: 3;
	    top: 45%;
	    left: 0;
	    bottom: 0;
	    background: white;
           /* border-radius: 0 0 3% 3%;*/
	    width: calc(100% - 40px); 
	}

.card-img1 {
		padding-left: 0;

	}

.card-img1 div {
    padding-bottom: 54%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 960px;
    width: 100%;

	}

	span.cta-card1 {
		font-size: 18px;
		line-height: 60px;
	}







.row-big-card .cont {
    box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
    margin: 10px auto;
    width: calc(100% - 10px);
    max-width: 960px;
   /* padding: 0 100px 0 100px;*/
    position: relative;
   /*border : dotted 1px #333;*/
   }


.card-img {
    padding-left: 45%;
    position: relative;
}

.row-big-card .cont .card-inner {
    padding: 25px 20px 0 50px;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    background: white;
    width: 40%;
   /* background-repeat: no-repeat;
    background-position: 90% 90%;
    background-size: 15%;*/
   /* background-image : url("../img1/Back1a.png");*/
}

.card-img div {
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 960px;
    padding-bottom: 350px;
    /*padding-right: 100px;*/
    transition: all .1s ease-in-out;
   /* padding-bottom: calc(330px + (400 - 330) * (100vw - 610px) / (960 - 610));*/
  }




.card-inner h3 {
    font-size: 35px;
    color: #20B2AA;
    line-height: 42px;
    letter-spacing: -1px;
    margin: 0 0 1.5%;
    transition: all .1s ease-in-out;
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /* 追加 */
  transform: rotate(.03deg);
}


.card-inner .tryog {
    font-size: 35px;
    color: #FF6600;
    line-height: 42px;
    letter-spacing: -1px;
    margin: 0 0 1.5%;
    transition: all .1s ease-in-out;
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /* 追加 */
  transform: rotate(.03deg);
}


.inner-text p {
   /* margin: 1.5% 0 0;*/
    font-size: 100%;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
  /* 追加 */
  transform: rotate(.03deg);
}
.inner-text {
    /*margin: 4.5% 0;*/
    padding: 3% 0 0;
    position: relative;
}

.card-inner h4 {
    margin: 0 0 10px 0;
    width: 250px;
    font-size: 20px;
    color: #555;
    background: linear-gradient(transparent 65%, #ffffa8 0%);
    /*line-height: 29px;*/
    margin: ;
   /* -webkit-transition: all .1s ease-in-out;*/
   /* transition: all .1s ease-in-out;*/
}

span.cta-card {
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    text-transform: uppercase;
    /*margin-left: 65%;*/
    margin-top: 3%;
    padding: 0 03%;
    border: 1px dotted #20B2AA;
    color: #20B2AA;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
   /* -webkit-transition: all .2s ease-in-out;*/
    /*transition: all .2s ease-in-out;*/
}


span.cta-cardog {
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    text-transform: uppercase;
    /*margin-left: 55%;*/
    margin-top: 3%;
    padding: 0 03%;
    border: 1px dotted #FF6600;
    color: #FF6600;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
   /* -webkit-transition: all .2s ease-in-out;*/
    /*transition: all .2s ease-in-out;*/
}


a.card-link:hover span.cta-card {
    background: #20B2AA;
    color: white;
}


#Qctiy {
margin: 50px 0 30px 0;
  display: flex;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

#Qctiyin{
display: flex;
margin: 0 auto;
width: 960px;
align-items: flex-start;

}

#Qctiy h1 {
padding:  15px 10px 20px 10px;
 color: #FF6600;
text-indent: 1em;
text-align: center;
font-size: 28px;
line-height:28px;
border-bottom : dotted  2px #FF6600;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /* 追加 */
}




#section3 {
padding-bottom: 350px;
  background-image: url(../img1/prepic1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


#section3 h2 {
text-align: center;
font-size: 28px;
}




#section4 {
padding-bottom: 200px;
 /* background-image: url(../img1/prepicBlue.png);*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#section4 h2 {
text-align: center;
font-size: 28px;
}





.flexBlog {
  display: flex;
  flex-wrap: wrap; 
  max-width: 960px;
  margin: 0px auto 0px;
  justify-content:space-between;
}

#a100{
box-shadow: 0 0 8px gray;
flex: 1 1 250px;
margin: 0px auto;
width: 100%;
margin: 5px 5px 5px 5px;
max-width: 960px;
position: relative;
}


#inner-g100 div {
 display: block;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 padding-bottom: 200px;
}


#inner-t100 {
display:flex;
flex-direction: column;
/*margin: 0 auto;*/
margin: 10px 10px 10px 10px;
/*padding: 0px 10px 0 10px;*/
/*width: calc(100% - 10px);*/
background: #fff;
}

#inner-t100 h3 {
 font-size: 12px;
 color: #888;
 line-height: 20px;
 letter-spacing:;
 text-align: end;
}

#inner-t100 h2 {
 font-size: 19px;
 color: #20B2AA;
 line-height: 35px;
 letter-spacing:;
 border-bottom: 1px dotted #20B2AA;
 text-align: center;
}


#inner-text100 {
 position: relative;
 margin: 10px 0px 10px 0px;
 padding: 0px 0 0 0;
}

#inner-text100 p{
font-size: 15px;
color: #666;
}

.linkBlog {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    margin-left: 52%;
    padding: 0 5% 0 5%;
    border: 1px dotted #20B2AA;
    color: #20B2AA;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}


footer {
margin: 30px auto 0;
background: #F1A652;
}



footer .footerin {
padding: 0px 0 30px 0;
/*background: #ccc;*/
}

nav.Fnav {

margin: 0 auto;
max-width: 960px;
 }



nav.Fnav ul {
	
  display: flex;
  flex-wrap: wrap;
   /*width: 60%; */
  /*max-width: 960px;*/
  margin: 0px auto;
 }



nav.Fnav ul li{
  margin: 20px 0 20px 0;
  padding: 0px 0 0px 0;
  /*box-sizing: border-box;*/
  border-left: 1px   dotted  #fff;
  background-color: ;
  text-align: center;
}


nav.Fnav ul li{
  flex: 1 1 50px;
}

nav.Fnav ul #only22{
 border-left: none; 
}

nav.Fnav ul #only11 {
 flex: 1 1 90px;
}


nav.Fnav a {
	
display: block;
font-size: 12px;
  color: #fff;	

}



footer .Fcomp {
margin: 10px auto 0px;
max-width: 960px;
}

footer .Fcomp h2 {
text-align: center;
font-size: 15px;
  color: #fff;
}

footer .Fcomp p {
text-align: center;
 font-size: 12px;
  color: #fff;
}


#toPageTop {
	position: fixed;
        z-index: 5;
        bottom: 35px;
	right: 10px;
}





@media (max-width: 960px) {



.R_textall {
 margin: 0px 0 0px 0px;
 padding: 10px 20px 10px 20px;
 max-width: 840px;
}

/*
.border p{
 margin: 0px auto;
 max-width: 840px;
 padding: 10px 20px 10px 20px;
font-size: 14px;
}
*/


/*
#Qcot {
  margin: 0px 0 0px 0;
  display: flex;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
   position: absolute;
    z-index: 3;
    top: -120px;
    left: 0;
    bottom: 0;
}
*/




header #head1 h1 {
           font-size: calc(30px  + (40 - 30)*(100vw - 610px)/(960 - 250));
           line-height: calc(40px  + (50 - 40)*(100vw - 610px)/(960 - 250));
}

nav.inDrawer a {
	
           font-size: calc(17px  + (17 - 17)*(100vw - 610px)/(960 - 250));
           line-height: calc(20px  + (20 - 20)*(100vw - 610px)/(960 - 250));	

}

	.card-img div {
         padding-bottom: calc(330px + (350 - 330) * (100vw - 610px) / (960 - 610));
	}
       
	.card-inner h3 {
		font-size: calc(23px  + (35 - 23)*(100vw - 610px)/(960 - 610));
		line-height: calc(28px  + (42 - 28)*(100vw - 610px)/(960 - 610));
	}
	.card-inner h4 {
		font-size: calc(16px  + (20 - 16)*(100vw - 610px)/(960 - 610));
		line-height: calc(20px  + (26 - 20)*(100vw - 610px)/(960 - 610));
	}
	.card-inner p {
		font-size: calc(15px  + (16 - 15)*(100vw - 610px)/(960 - 610));
		line-height: calc(19px  + (27 - 19)*(100vw - 610px)/(960 - 610));
	}
	span.cta-card {
		font-size: calc(13px  + (14 - 13)*(100vw - 610px)/(960 - 610));
		line-height: calc(20px  + (25 - 20)*(100vw - 610px)/(960 - 610));
               /* margin-left: 60%;*/
	}
	.row-big-card .cont .card-inner {
		padding-left: 30px;
		padding-top: 25px;
	}
}

/*
@media screen and (min-width:610px) and ( max-width:960px) {
inner-hero {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%,-50%);
  text-align: center;
  z-index:1;
  width: %;
}
}
*/


@media all and (max-width: 610px) {


header #head1 p {
margin: 0px auto 0px; 
text-align: center;
}

header #head1 p img {
width: 90px;
height: auto;
}


nav.regular ul a {
display: block;
font-size: 15px;
  color: #666;
  display: block;	
}

#section0 {
display: none;
}


.hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(350px + (350 - 350) * (100vw - 610px) / (610 - 250));
}


.hero #logo1 {
 position: absolute;
  top: 1%;
  left: calc(80% - 10px);
}

.hero #logo1 img {
 width: 70%;
 height: auto;
}

.hero #logo2 {
  position: absolute;
  top:  calc(40% - 10px);
  left: 3%;
}

.hero #logo2 img {
  width: 250px;
  height: auto;
}

#logo1 img {
margin-left: auto;
padding-right: 20px;
width: 100px;
height: auto;

}


.proflex .proBox {
flex: 0 1 49%;
}

.proflex .proBox .aTop {
display: block;
width: 100%;
height: 70%;
}


.proflex .proBox .aBott{
display: block;
/*margin: 133px 0 0 0;*/
padding-top: 5%;
width: 100%;
height: 24%;
color: #666;
text-align: center;
font-size: 18px;
background-color: rgba(255,255,255,0.5);
}




/*
#Qcot {
  margin: 0px 0 0px 0;
  display: flex;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
   position: absolute;
    z-index: 3;
    top: -70px;
    left: 0;
    bottom: 0;
}
*/


#Qcotin h1 {
padding:  0px 0px 10px 20px;
white-space: pre-line;
font-size: 25px;
text-align:start;
text-indent: 0em;
}






#section0 #a2{
 margin: 3px 0 0 0;
 padding: 0 0 0px 0;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
/* background-image: url("../img1/imgB2/imgB2_4.png");*/
 background-color:#fff;
 box-shadow: 0 0 8px rgba(0,0,0,.3);
}


#section0 #b2{
margin: 0 auto;
position: relative;
max-width:840px;
}



#section0 #inner-t2 {
max-width:840px;
width: 70%;
height: auto;
padding: 0px 0px 0px 0px;

}



#section0 #inner-t2 h2 {
 white-space: pre-line;
 padding: 80px 0 40px 0;
 font-size: 30px;
 line-height: 70px;
 text-align: center;
 letter-spacing: 1px;
 background: rgba(255,255,255,0.8);
 }





.Rap {
 margin: 20px auto 20px;
 max-width: 840px;
 height: auto;
 /*background-color:#ddd;*/
}


.R_textall {
 margin: 0px 0 0px 0px;
 padding: 10px 20px 10px 20px;
 max-width: 840px;
}


.R_textall .R_text {
margin: 0px 0 0px 0;
white-space: pre-line;
letter-spacing: 2px;
padding: 25px 0 0px 0;
color: #666;
font-size: 14px;
line-height: 22px;
}

.texth2 {
display :inline-block;
max-width: 840px;
margin: 0px 0 0 0px;
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #000;
font-size: 18px;
line-height: 25px;
text-indent: ;
border-bottom: dotted 1px #888;
}

.texth2Con {
display :inline-block;
max-width: 840px;
/*margin: 0px 0 0 0px;*/
white-space: pre-line;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #000;
font-size: 18px;
line-height: 40px;
text-indent: ;
border-bottom: dotted 1px #888;
}



.R_textallCon .texth3Con {
margin: 10px 0 0 0px;
letter-spacing: 2px;
padding: 0px 0 0px 0;
color: #FF6600;
font-size: 18px;
line-height: 22px;
text-indent: ;
}

.R_textallCon .R_textCon {
margin: 0px 0 0px 0;
white-space: pre-line;
letter-spacing: 2px;
padding: 10px 0 0px 0;
color: #666;
font-size: 14px;
line-height: 22px;
}





#a17{
 margin: 3px auto 0;
 padding-bottom: 250px;
 max-width: 100%;
 position: relative;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-image: url("../img1/imgB4/imgB4_8.png");
 background-color:#fff;
}

	.row-big-card .cont .card-inner {
	    padding: 0 20px 30px;
	    position: relative;
	    z-index: 3;
	    top: 45%;
	    left: 0;
	    bottom: 0;
	    background: white;
	    width: calc(100% - 40px); 
            /*background-repeat: no-repeat;
            background-position: 90% 90%;
            background-size: 20%;*/
           /* background-image : url("../img1/Back1a.png");*/
	}


.inner-hero {
  position: absolute;
  top: 50%;
  left: 78%;
  transform: translate(-50%,-50%);
  text-align: center;
  z-index:1;
  /*background-color: #FFF;*/
}

#inner-t2 {
 padding: 10px 15px 10px 15px;

}







	.row-big-card .cont .card-img div {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
	}
	.row-big-card .cont:hover .card-img img, .row-big-card .cont:hover .card-img div {
	   /* -webkit-clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);*/
		clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);
	}

	.card-img {
		padding-left: 0;

	}

	.card-img div {
		padding-bottom: 64%;
	}

	.card-inner h3 {
		font-size: calc(27px  + (48 - 27)*(100vw - 320px)/(610 - 320));
		line-height: calc(33px  + (66 - 33)*(100vw - 320px)/(610 - 320));
	}
	.card-inner h4 {
		font-size: calc(18px  + (24 - 18)*(100vw - 320px)/(610 - 320));
		line-height: calc(22px  + (26 - 22)*(100vw - 320px)/(610 - 320));
	}
	.card-inner p {
		font-size: calc(14px  + (19 - 14)*(100vw - 320px)/(610 - 320));
		line-height: calc(18px  + (33 - 18)*(100vw - 320px)/(610 - 320));
	}
	span.cta-card {
		font-size: calc(13px  + (14 - 13)*(100vw - 320px)/(610 - 320));
		line-height: calc(25px  + (30 - 25)*(100vw - 320px)/(610 - 320));
	}


.content .toptext {
  width: calc(100% - 50px);
   }


nav.Fnav {

margin: 0 auto;
max-width: 960px;
 }



nav.Fnav ul {
	
  display: flex;
  flex-direction: column;
  margin: 0px auto;
 }



nav.Fnav ul li{
  margin: 0px 0 0px 0;
  padding: 15px 0 15px 0;
  /*box-sizing: border-box;*/
  border-bottom: 1px   dotted #fff;
  background-color: ;
  text-align: center;
}


nav.Fnav ul li{
flex: 1 1 0px;
}

nav.Fnav ul #only22{
 border-bottom: 1px   dotted #fff;
border-top: 1px   dotted #fff;
background: #ccc;
}

nav.Fnav ul #only22 a{
padding: 0px 0 0px 0;
font-size: 19px;
color: #000;
}

nav.Fnav ul #only11 {
flex: 1 1 0px;
}


nav.Fnav a {
	
display: block;
font-size: 17px;
  color: #fff;		

}


}




body #Humb {
   position: fixed;
   z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  padding: 25px;
   background-color: rgba(255,255,255,0.6);
   border-radius: 2px 2px 20px 2px;
}


#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 35px;/*長さ*/
  border-radius: 3px;
  background: #FF6600;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 280px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

.accbox #toHome {
display: flex;
margin: 0 0 10px 0;
width: 100%;
align-items: flex-start;
}

.accbox #toHome p {
padding:  10px 10px 10px 10px;
 color: #FF6600;
text-indent: ;
text-align: center;
font-size: 25px;
line-height:25px;
border-bottom : dotted  2px #FF6600;
font-family: ;
  /* 追加 */
}

.accbox #toHome p a {
color: #555;
}

.accshow h2 a .green {
color: #FF6600;
}

.accshow .labelh2dotto {
margin: 0 0 5px 0;
}

.accshow .labelh2dotto a {
color: ##FF6600;
border-bottom : dotted  1px #FF6600;
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#FF6600;
    font-weight: normal;
    background :;
    cursor :pointer;
    transition: all 0.5s;
    border-bottom : dotted  1px #FF6600;
}

.accbox label a {
   font-size: 16px;
   color :#FF6600;
}

.accbox .aline {
display: inline-block;
background: linear-gradient(transparent 65%, #ffffa8 0%);
}

.accshow h2 {
color: #FF6600;
font-size: 15px;
text-indent: 1em;
line-height: 25px;
}

.accshow h2 a {
color: #555;
}

/*ラベルホバー時*/
/*
.accbox label:hover {
    background :#85baef;
}
*/

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: ;
    opacity: 1;
}