@charset "UTF-8";
/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-size: 100%;font-family: 'M PLUS 1p', sans-serif; font-weight: 200;
	line-height: 1.6;
	}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
ul{
  margin: 0;
  padding: 0;
}
dl{
  margin: 0;
  padding: 0;
}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ outline: none; }
input, textarea
{ border-radius: 0; }
input[type="button"],input[type="submit"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll; width: 100%; }
body { text-align: center;width: 100%; 
}
/* ======================================== */

a:link { color: #4494d1; text-decoration:none; transition: 0.5s;}
a:visited { color: #c86eab; }
a:hover { color: #e84558; }
a:active { color: #000; }

/* contents
---------------------------------------------------------- */
#contents {	
	margin: 0 auto; position:relative; background-color: #fbf8da;
	width: 100%;
	padding:0;
	text-align:left;
}

#contents:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}


header.head{
width: 100%; height:auto; padding: 0; overflow:hidden; position: relative; background-color: #fbf8da;
display:flex;flex-direction:row;
align-items : flex-start;
background-image: url(../images/top_right_bg.jpg); background-repeat: none; background-position: right bottom;
}
.top_logo{}

dl.head-box01{ margin:0 auto; padding:0; width:40%; height: auto; position: absolute; top:64%; left: 5%; text-align: center;
display:flex;
justify-content:center;
flex-direction:column;
}
dl.head-box01 dt{width:100%; height: 100%; font-size: 300%; color: #e84558;font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg);  font-weight: 700;
display:flex;
flex-direction:column; border-bottom: 1px #bfbfbf solid;
}
dl.head-box01 dd{width:100%; padding: 0;font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg);
display:flex;
flex-direction:column;
  }
dl.head-box01 dd h1{ width: 100%;  font-size: 100%;font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg);  font-weight: 700;color: #cb70ab; margin-top: 10px;}
dl.head-box02{ margin:0 auto; margin-top: 70px; padding:0; width:48%; height: auto; text-align: center; 
display:flex;
justify-content:center;
}
dl.head-box02 dt{width:50%; height: 100%; padding: 5px 10px 5px 0;
display:flex;
flex-direction:column;
}
dl.head-box02 dd{width:50%; padding: 5px 0 5px 10px;
display:flex;
flex-direction:column;
  }
dl.head-box02 img{border: 1px #9a9595 solid; width: 100%; height: auto;}

@media screen and (max-width: 767px) {
header.head{flex-direction:column; height:auto; }
.top_logo img{ width: 100%; margin-left: -20px;}
dl.head-box01{ margin:0 auto; padding:0; width:90%; height: auto; position: relative; top:-180px; left: 10px; text-align: center;
display:flex;
justify-content:center;
flex-direction:column;
}
dl.head-box01 dt{width:100%; height: 100%; font-size: 140%; font-weight: 700;
display:flex;
flex-direction:column; border-bottom: 1px #bfbfbf solid;
}
dl.head-box01 dd{width:100%; padding: 0;
display:flex;
flex-direction:column;
  }
dl.head-box01 dd h1{ width: 100%;  font-size: 90%;font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg); margin-top: 10px;}
dl.head-box02{ margin:0 auto; margin-top: -160px; padding:0; width:90%; margin-bottom: 60px; height: auto; text-align: center; 
display:flex;
justify-content:center;
flex-direction:column;
}
dl.head-box02 dt{width:100%; padding: 20px 0;
}
dl.head-box02 dd{width:100%; padding: 20px 0;
  }
}

/* For iPad */
@media screen and (min-width:768px) and (max-width:949px){
header.head{flex-direction:column; height:auto; }
dl.head-box01{ margin:0 auto; padding:0; width:90%; height: auto; position: relative; top:-280px; left: 10px; text-align: center;
display:flex;
justify-content:center;
flex-direction:column;
}
.top_logo img{ width: 100%; margin-left: -20px;}
dl.head-box02{ margin:0 auto; margin-top: -150px; padding:0 0 50px 0; width:90%; }
}

/* For Laptop */
@media screen and (min-width:950px) and (max-width:1620px){
.top_logo img{ width: 90%;}
dl.head-box02{ margin:0 auto; margin-top: 70px; padding:0 40px 0 0; width:56%; height: auto; text-align: center; 
display:flex;
justify-content:center;
}
}

/* ======================================== */

.main {
	margin: 0 auto; padding:0;
	width: 100%; height:auto;	
    display:flex;	
    flex-direction:column;
    flex-wrap:wrap;
}

.main:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

.sub-tit{ width: 100%; padding: 5px 5px 5px 6%; color: #fff; font-size: 160%; letter-spacing: 0.1em;display:flex;align-items:center;}
.bg-violet{ background-color: #c86eab;border-top: 3px #fff dotted;border-bottom: 3px #fff dotted;}
.bg-blue{ background-color: #4494d1;border-top: 3px #fff dotted;border-bottom: 3px #fff dotted;}
.bg-green{  background-color: #91bc63;border-top: 3px #fff dotted;border-bottom: 3px #fff dotted; }
.bg-yellow{  background-color: #ebbc26;border-top: 3px #fff dotted;border-bottom: 3px #fff dotted; }

.shuroku-section{ width: 100%; margin: 0; padding: 0 0 40px 0;}
.section-bg-violet{ background-color: #f1f0fb; }
.section-bg-yellow{ background-color: #fdfcef; }
.section-bg-blue-gradetion{
background: rgb(242,242,242);
background: radial-gradient(circle, rgba(242,242,242,1) 0%, rgba(145,238,224,1) 100%);}
.section-bg-mesh-gradetion{ background-image: url(../images/mesh-gradetion-bg.jpg);
}
dl.shuroku-box{ width: 70%; margin: auto; margin-top: 40px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-around;
}
dl.shuroku-box dt{ width: 54%;
}
dl.shuroku-box dd{ width: 46%;
}
dl.title-box{ width: 90%; margin: auto; margin-bottom: 40px;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
justify-content:space-around;
}
dl.title-box dt{ width: 100%;
    display:flex;	
    flex-direction:column;
    flex-wrap:wrap;
border-bottom: 8px #25b7aa dashed; color: #c86eab; font-weight: 700;
}
dl.title-box dd{ width: 100%;
    display:flex;	
    flex-direction:column;
    flex-wrap:wrap;
}
.jkt-p img{ width: 98%;border: 1px #9a9595 solid; float: right;}

div.shuroku-naiyo-box{
width: 70%; margin: auto; margin-top: 30px; margin-bottom: 80px;
display:flex;
justify-content:space-around;
}
div.shuroku-naiyo-box-inner{
padding: 3px;
width: 50%;
}
.shuroku-naiyo-box ul {width: 100%; list-style: disc;
padding-left: 15px; line-height: 2.2;
}
.squar{width: 100%; list-style: none; padding-left: -15px; line-height: 2.2;
}
.shuroku-naiyo-box ol {width: 100%; list-style: decimal;
padding-left: 30px; line-height: 2.2;
}

button { color:#454545;background:transparent;border-width:2px;border-style: solid;border-color: #454545;position:relative;margin:1em;display:inline-block;
padding:1em 1em;transition:all 0.3s ease-in-out;text-align:center;font-weight:bold; font-size: 120%;}
button:before, button:after {content:'';display:block;position:absolute;border-color:#454545;box-sizing:border-box;border-style:solid;width:1em;height:1em;transition:all 0.3s ease-in-out}
button:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;}
button:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;}
button:hover:before, button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color:#fff}
button:hover {color:#353535;background-color:#fff;border-color:#fff}
.panel {width:100%;text-align:center;position:relative;margin:auto;}
.green button {color:#25b7aa;border-color:#25b7aa}
.green button:before, .green button:after  {border-color:#25b7aa}
.green button:hover:before, .pink button:hover:after {border-color:#25b7aa;}
.green button:hover {color:#fff;background-color:#25b7aa;border-color:#25b7aa;}
.green .panel {max-width:960px;text-align:center;position:relative;margin:auto;}

p.discription{ margin-top: 20px; margin-bottom: 20px;}
div.spc-box{ display: block; margin-top: 40px; margin-left: 20px; margin-right: 20px;}
p.spc{display: block; margin-top: 20px; }

.info-type-box{ width: 70%; margin: auto; margin-top: 60px; margin-bottom: 10px;}
.info-type{ background-color: #eb6154; color: #fff;border-radius:5px; padding: 6px; text-align: center; width: auto; font-weight: 700; letter-spacing: 0.1em; }
dl.info-box{ margin:0 auto; margin-top: 4px; padding:0; width:70%; height: auto; text-align: left; 
display:flex;
justify-content:center;
flex-direction:column;
}
dl.info-box dt{width:100%; height: 100%; padding: 5px 10px 5px 10px;
font-size: 130%; font-weight: 700;border-left: 8px #eb6154 double;
border-bottom: 2px #a5a6a6 solid;
}
dl.info-box dd{width:100%; padding: 5px 0 5px 0;
}
dl.about-box { margin:0 auto; margin-top: 30px; margin-bottom: 20px; padding:0; width:70%; height: auto; text-align: left; 
display:flex;
justify-content:center;
flex-direction:column;font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg);
}
dl.about-box dt{width:100%; height: 100%; padding: 5px 10px 5px 10px;
font-size: 280%; font-weight: 600;border-bottom: 1px #a5a6a6 dashed;
}
dl.about-box dd{width:100%; padding: 5px 0 5px 0;font-size: 160%;
}
p.about-discrip{margin:0 auto; margin-bottom: 16px; padding:0; width:70%; }
.link-box{ width: 517px; margin: auto; margin-top: 50px; text-align: center;
}

@media screen and (max-width: 767px) {
.main {padding:10px 0px 0px 0px;}
dl.shuroku-box{ width: 90%; margin: auto; margin-top: 40px; margin-bottom: 80px;
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:space-around;
}
dl.shuroku-box dt{ width: 100%;
}
dl.shuroku-box dd{ width: 100%; padding: 40px 0;
}
div.shuroku-naiyo-box{
width: 100%;
display:flex;
justify-content:space-around;
flex-direction:column;
}
div.shuroku-naiyo-box-inner{
padding: 3px 20px 3px 20px;
width: 100%;
}
.info-type-box{ width: 90%; margin: auto; margin-top: 60px; margin-bottom: 10px;}
.info-type{ background-color: #eb6154; color: #fff;border-radius:5px; padding: 6px; text-align: center; width: auto; font-weight: 700; letter-spacing: 0.1em; }
dl.info-box{ margin:0 auto; margin-top: 4px; padding:0; width:90%; height: auto;
}
dl.info-box dt{width:100%; height: 100%; padding: 5px 10px 5px 10px;
font-size: 110%; font-size: 700;border-left: 8px #eb6154 double;
border-bottom: 2px #a5a6a6 solid;
}
dl.info-box dd{width:100%; padding: 5px 0 5px 0;font-size: 90%;
}
dl.about-box { margin:0 auto; margin-top: 30px; margin-bottom: 20px; padding:0; width:90%; height: auto; text-align: left; 
display:flex;
justify-content:center;
flex-direction:column;
}
dl.about-box dt{width:100%; height: 100%; padding: 5px 10px 5px 10px;
font-size: 140%; font-weight: 600;border-bottom: 1px #a5a6a6 dashed;
}
dl.about-box dd{width:100%; padding: 5px 0 5px 0;font-size: 100%;
}
p.about-discrip{margin:0 auto; margin-bottom: 16px; padding:0; width:90%; }
dl.title-box{ margin-bottom: 0;}
.link-box{ width:80%;
}
.link-box img{ width: 100%;}
}

.tokuten-p img{ max-width: 98%; clear: right;}

/* For iPad */
@media screen and (min-width:768px) and (max-width:949px){
.main {padding:10px 0px 0px 0px;}
dl.shuroku-box{ width: 90%; }
div.shuroku-naiyo-box{
width: 100%;
display:flex;
justify-content:space-around;
flex-direction:row;
}
div.shuroku-naiyo-box-inner{
padding: 3px 3px 3px 20px;
width: 100%;
}
.shuroku-naiyo-box ul {width: 100%; list-style: disc;
padding-left: 15px; line-height: 2.2;
}
.shuroku-naiyo-box ol {width: 100%; list-style: decimal;
padding-left: 30px; line-height: 2.2;
}
dl.info-box{ margin:0 auto; margin-top: 4px; padding:0; width:90%; height: auto;
}
dl.about-box { margin:0 auto; margin-top: 30px; margin-bottom: 20px; padding:0; width:90%; height: auto; text-align: left; 
display:flex;
justify-content:center;
flex-direction:column;
}
p.about-discrip{margin:0 auto; margin-bottom: 16px; padding:0; width:90%; }
.link-box img{ width: 100%;}
}
/* For Laptop */
@media screen and (min-width:950px) and (max-width:1620px){
div.shuroku-box{ width: 90%;}
div.shuroku-box ol {width: 50%; font-size: 100%;}
}
/* footer
---------------------------------------------------------- */
#foot{
margin: 0; padding:3% ; color:#999; background-color: #fbf8da;
width:100%;bottom:0;
display:flex;
flex-direction:column;
align-items:center;
}


/*
=========================================
  Utilities
=========================================
*/

/* txt
---------------------------------*/
.txt-L{ font-size: 280%;}
.txt-ML{ font-size: 230%;}
.txt-M{ font-size: 150%;}
.txt-S{ font-size: 80%;}

.txt-def{font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg);}
.Noto-Sans-300{font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg); font-weight: 300;}
.Noto-Sans-400{font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg); font-weight: 400;}
.Noto-Sans-500{font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg); font-weight: 500;}
.Noto-Sans-700{font-family: 'Noto Sans JP', sans-serif;transform: rotate(0.05deg); font-weight: 700;}

.line-height1-3{ line-height: 1.3;}
.txt-grey{ color: #999999;}
.txt-blue{color: #4494d1;}

@media screen and (max-width: 767px) {
.txt-L{ font-size: 200%;}
}

/* inview
---------------------------------*/
.head,.shuroku-section{ opacity:0;}
.fadeInlow01{
  transition: all 2s ease-out;
  opacity: 1 !important;
}
.fadeInup{
  transition: all 1s ease-in;
  transform: translateY(-20px);
  opacity: 1 !important;
}
/* margin
---------------------------------*/
.mb-20{ margin-bottom: 20px;}
.mb-100{ margin-bottom: 100px;}
.pb-100{ padding-bottom: 100px;}

@media screen and (max-width: 767px) {
.mb-100{ margin-bottom: 60px;}
.pb-100{ padding-bottom: 60px;}
}

/* float
---------------------------------*/
.align-left{ float: left;}