@charset "UTF-8";
body {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #f7f8f8;

}


html ,body { height: 100%; margin: 0; padding: 0;}

#wrap {
	width: 100%;
	margin: 0 auto;
	height: 100%;
	max-width: 768px;
}



* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
* {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  font: inherit;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  text-decoration: none;
  vertical-align: baseline;
}
#Cont_box {
	margin: 20px 0 150px;
	padding-top: 0px !important;
}

@media screen and (max-width: 600px) {
#Cont_box {
	margin: 20px 0 10px;
}
}

.Block_center {
	text-align: center;
}


/*Font*/
.lang_L {
	font-size: 16px;
}
.lang_m {
	font-size: 14px;
}
.lang_s{
	font-size: 18px;
}
.Bord_front {font-weight: bold;}
/*color*/
.short_B_pink {
	background:#f4b3cc ;
}
.short_B_yellow {
	background:#FCF27D ;
}
.short_B_grey {
	background:#dcdddd ;
}
.short_B_green {
	background:#d3e6f6 ;
}
.short_B_blue {
	background:#a0b0c2 ;
}
.short_F_pink {
	color:#e61673 ;
}

/*main*/
header {
	width: 100%;
	min-height: 100%;
	background: #036eb8;
	padding: 50px 0 10%;
	margin: 0;
	text-align: center;
	display: block;
}

.main_wrap_box {
}

.main_box {
	width: 100%;
	margin: 0 auto 10%;


}

.main_box h1 img {
	width: 100%;
	margin: 0;
	padding: 0;
}
.main_box h2 img {
	width: 80%;
	margin: 7% auto;
}

li {list-style:none;}
header li img {width: 17%; margin-bottom: 10px;}


.to_pc img { width: 25%; margin: 15px auto;}

@media screen and (max-width: 600px) {
  .to_pc  {
    display: none;
  }
  .to_pc img  {
    display: none;
  }
}



/*img*/
#ptn_01_box img.main_Box ,#ptn_02_box img.main_Box {
	padding: 20px;
	margin-left: 15%;
	width: 75%;
	position: sticky;
	display: inline-block;
}


/*20180215追加*/
#main_first {
	width: 100%;
	background: #fff07d;
	padding: 80px 0 30px;

}
#main_first img {
	width: 100%;

}
#main_first h2 {
	width: 85%;
	margin: 0 auto 10px;
}
#main_first h3 {
	width: 90%;
	margin: 0 auto 15px;
}
#main_first .illust_image {
	width: 80%;
	margin: 0 auto 15px;
}
#main_first .illust_2image {
	width: 85%;
	margin: 0 auto;
}
#main_first .Read_box {
    -webkit-border-top-left-radius: 20px;  
    -webkit-border-top-right-radius: 20px;  
    -webkit-border-bottom-right-radius: 20px;  
    -webkit-border-bottom-left-radius: 20px;  
    -moz-border-radius-topleft: 20px;  
    -moz-border-radius-topright: 20px;  
    -moz-border-radius-bottomright: 20px;  
    -moz-border-radius-bottomleft: 20px;
	border-top-left-radius: 20px;  
    border-top-right-radius: 20px;  
    border-bottom-right-radius: 20px;  
    border-bottom-left-radius: 20px; 
	padding: 20px;
	background: #fff;
	border: 1px solid #036eb8;
	width: 85%;
	margin: 0 auto 45px;
	font-size: 12px;
}
#main_first ul {
	width: 80%;
	margin: 0 auto 20px;
	font-size: 12px;
}
#main_first li {
	width: 100%;
	position: relative;
	padding-left:20px; 
	margin-bottom: 5px;
}
#main_first li:before {
content:"■";
position: absolute;
left: 0;
top: 0;
	color: #036eb8;
}



#main_second {
	width: 100%;
	background: #036eb8;
	padding: 15px 0;

}
#main_second p {
	text-align: center;
	color: #fff;
	margin-bottom: 10px;
}
#main_second ul {
	width: 80%;
	margin: 0 auto;
}
#main_second ul li {
	width: 100%;
}
#main_second ul li img {
	width: 100%;
}

/*20180215追加*/





section {
	position: relative;
	width:95%;
	 margin: 0 auto 10%;
}

.Fukidashi {width: 10%;	top: 15%}
.Icon {width: 15%;}
/*PT1*/
#ptn_01_box {}


#ptn_01_box .Icon {
	position: absolute;
	left: 0;
	top: 0;
}
#ptn_01_box .Fukidashi {
	position: absolute;
	left: 17%;

}
#ptn_01_box .Coment_Box ,#ptn_02_box .Coment_Box {
    -webkit-border-top-left-radius: 30px;  
    -webkit-border-top-right-radius: 20px;  
    -webkit-border-bottom-right-radius: 20px;  
    -webkit-border-bottom-left-radius: 20px;  
    -moz-border-radius-topleft: 30px;  
    -moz-border-radius-topright: 20px;  
    -moz-border-radius-bottomright: 20px;  
    -moz-border-radius-bottomleft: 20px;
	border-top-left-radius: 30px;  
    border-top-right-radius: 20px;  
    border-bottom-right-radius: 20px;  
    border-bottom-left-radius: 20px;  
	padding: 20px;
	margin-left: 20%;

	position: sticky;
	display: inline-block;
}
#ptn_01_box ul {display:table;
	text-align: left;
	margin: 10px 0 0;
	padding: 0;
}
#ptn_01_box li {
	display:table-cell;
    list-style:none;
	vertical-align: middle;
}
#ptn_01_box li img {
	width: 40px;
	margin-right: 10px;
}
/*PT4*/

#ptn_04_box .Icon {
	position: absolute;
	left: 0;
	top: 30%;
}
#ptn_04_box .Fukidashi {
	position: absolute;
	left: 17%;
}
#ptn_04_box img.main_Box {
	padding: 20px;
	margin-left: 15%;
	width: 65%;
	position: sticky;
	display: inline-block;
}
#ptn_04_box img.main_2Box {
	padding: 20px;
	margin-left: 15%;
	width: 80%;
	position: sticky;
	display: inline-block;
}

/*PT6*/

#ptn_06_box {
	text-align: center;
}

#ptn_06_box .Coment_Box {
    -webkit-border-top-left-radius: 10px;  
    -webkit-border-top-right-radius: 10px;  
    -webkit-border-bottom-right-radius: 10px;  
    -webkit-border-bottom-left-radius: 10px;  
    -moz-border-radius-topleft: 10px;  
    -moz-border-radius-topright: 10px;  
    -moz-border-radius-bottomright: 10px;  
    -moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;  
    border-top-right-radius: 10px;  
    border-bottom-right-radius: 10px;  
    border-bottom-left-radius: 10px; 
	padding: 10px;
	position: sticky;
	display: inline-block;
	width: 80%;
	margin: 0 auto;
}



/*PT7*/
#ptn_07_box{
	text-align: right;
}
#ptn_07_box .Icon {
	position: absolute;
	right: 0;
	top: 0;
}
#ptn_07_box .Fukidashi {
	position: absolute;
	right: 17%;
}
#ptn_07_box .Coment_Box {
    -webkit-border-top-left-radius: 20px;  
    -webkit-border-top-right-radius: 30px;  
    -webkit-border-bottom-right-radius: 20px;  
    -webkit-border-bottom-left-radius: 20px;  
    -moz-border-radius-topleft: 20px;  
    -moz-border-radius-topright: 30px;  
    -moz-border-radius-bottomright: 20px;  
    -moz-border-radius-bottomleft: 20px;
	border-top-left-radius: 20px;  
    border-top-right-radius: 30px;  
    border-bottom-right-radius: 20px;  
    border-bottom-left-radius: 20px; 
	padding: 20px;
	margin-right: 20%;
	position: sticky;
	display: inline-block;
	text-align: left;
}


/*PT8*/
#ptn_08_box {
	text-align: right;
}
#ptn_08_box .Icon {
	position: absolute;
	right: 0;
	top: 30%;
}
#ptn_08_box .Fukidashi {
	position: absolute;
	right: 17%;
}
#ptn_08_box img.main_Box {
	padding: 20px;
	margin-right: 15%;
	width: 65%;
	position: sticky;
	display: inline-block;
}

.pc_box {
	display: none;
}
.sp_box {
	display: block;
}

@media screen and (max-width: 600px) {
.pc_box {
	display: block;
}
.sp_box {
	display: none;
}
}
/*SP_FUT*/
#Nav_box {
    position: fixed;
    top: 0px;
    right: 0px;
	width: 100%;
	margin: 0 auto;
	background: #fff;
	padding: 5px;
	height: 50px;
}
#Nav_box .nav_box_In {
    margin: 0 0 0;
	padding: 0;
	width: 100%;
	/*max-width: 600px;*/
	max-width: 750px;
	margin: 0 auto;
	position: relative;
}

#Nav_box .nav_box_In h1 {
    margin: 0 0 0;
	padding: 0;
	position: absolute;
	top: 8px;
	left: 0;
}
#Nav_box .nav_box_In h1 img {
	/*width: 150px;*/
	width: 123px;
}
#Nav_box .nav_box_In li {
	position: absolute;
	
}
#Nav_box .nav_box_In li:nth-child(1) {
	top: 5px;
	right: 76px;
}
#Nav_box .nav_box_In li:nth-child(2) {
	top: 5px;
	right: 38px;
}
#Nav_box .nav_box_In li:nth-child(3) {
	top: 5px;
	right: 0;
 	background-image: url(../images/sns_03.png);  
	background-repeat: no-repeat; 
	background-size:30px;
	min-width: 30px;
}

.line-it-button {
  opacity: 0;
}

#Nav_box .nav_box_In li img {width: 30px;}


/*SP_FUT*/
#fut_box {
    position: fixed;
    bottom: 0px;
    right: 0px;
	width: 100%;
	height:auto;
	margin: 0 auto;
	background: #fff;
	padding: 0;
}
#fut_box ul {display:table;
	margin: 0 0 0;
	padding: 0;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;

}
#fut_box li {
	display:table-cell;
    list-style:none;
	width: 50%;
	margin: 0 ;
	padding: 0;

}
#fut_box li img {
	width: 100%;
	padding: 0 0 0 0;
	margin: 0 0 -7px 0;
}
#fut_box li a {
	margin: 0;
	padding: 0;
}


@media screen and (max-width: 600px) {
#fut_box { display: none;
}
#fut_box ul {display: none;
}
}






/********************
loading effects
********************/
.loadingAnim{
    position: fixed;
    z-index: 101;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.loadingAnim_line{
    line-height: 1;
    position: fixed;
    z-index: 101;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    width: 150px;
    height: 1.25em;
    margin: auto;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
    transition-delay: .6s;
    text-align: center;
}
.loadingAnim_line:after{
    position: absolute;
    z-index: 101;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
    margin: auto  auto auto 0;
    content: ' ';
    -webkit-animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
    animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
    background-color: #fff;
    will-change: transform, width;
}
.loadingAnim_line:before{
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    display: block;
    content: 'LOADING';
    -webkit-animation: loadingAnim_text 1s ease .1s infinite alternate both;
    animation: loadingAnim_text 1s ease .1s infinite alternate both;
    letter-spacing: .5em;
    color: #fff;
    will-change: opacity;
}
.loaded .loadingAnim_line{
    overflow: hidden;
    height: 0;
}
.loaded .loadingAnim_line:after,
.loaded .loadingAnim_line:before{
    -webkit-animation: none;
    animation: none;
}
.loaded .loadingAnim_line:before{
    content: 'LOADED!';
}

.loadingAnim:before,
.loadingAnim:after{
    line-height: 1;
    position: fixed;
    z-index: 100;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 50%;
    margin-right: auto;
    margin-left: auto;
    content: ' ';
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
    transition-delay: .3s;
    background-color: #e5005a;

}
.loadingAnim:before{
    top: 0;
}
.loadingAnim:after{
    bottom: 0;
}

.loaded .loadingAnim:before{
    height: 0;
    -webkit-transform: translateY(-1%);
    -ms-transform: translateY(-1%);
    transform: translateY(-1%);
}
.loaded .loadingAnim:after{
    height: 0;
    -webkit-transform: translateY(1%);
    -ms-transform: translateY(1%);
    transform: translateY(1%);
}