@charset "utf-8";
/* CSS Document */

html{
	scroll-behavior: smooth; /*スムーススクロール*/
}


body{
width: 100%;
height: 100%;	
font-size: 62.5%; 	/* font-size 10px */
color:#333;
height: 100%;
position: relative;	
-webkit-overflow-scrolling: touch;/*スマホのスクロールをスムーズにする*/
word-break: break-word;/*自動改行*/	
	
 font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
	
}


/***************************************

common

***************************************/






a {
	text-decoration: none;
	color: #333;
	outline: none;
}

a:hover {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	opacity: 0.5;
	filter: alpha(opacity=50);
	webkit-transition: 0.6s;
	transition: 0.6s;
}

.clearfix:after {/*親要素に display: flow-root Chrome と Firefox */
  content: "";
  clear: both;
  display: block;
}	

ul{
	list-style-type: none;
	overflow:hidden;
	
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
	
	
}

	
/***************************************

header

***************************************/



header{
    width: 100%;
	position: fixed;
    top: 0;
    left:0;
	z-index: 100000;
	background: #fff;
	
}

nav{
	width: 95%;
	margin: 0 auto 1%;
}



ul.navi{
	width: 100%;
	margin: 0 auto;
	font-size: 0.8rem;
	
}	

img.Logo{
	width: 50%;
	text-align:left;
	vertical-align:middle;	
}

ul.navi li{
	  float: left;
	  margin: 1% 0 0;		
}

 li.li7 {  
  width: 7%;	
}
 li.li19 {  
  width: 19%;	
}

 li.li60 {  
  width: 60%;	
}

ul.navi li p{
	  font-size: .1rem;		
}


@media (max-width:768px) {
	
	
	

header{
    width: 100%;
	position: fixed;
    top: 0;
    left:0;
	z-index: 100000;
	background: #fff;
	
}

nav{
	width: 100%;
	margin: 0 auto 1%;
}



ul.navi{
	width: 100%;
	margin: 0 auto;
	font-size: 0.6rem;
	
	
	
}	

img.Logo{
	width: 2000%;
	text-align:left;
	vertical-align:middle;	
}

ul.navi li{
	  float: left;
	  margin: 2.5% 0 0;		
}

 li.li7 {  
  width: 18%;
	 text-align: center;
	 
}
 li.li19 {  
  width: 1%;	
}

 li.li60 {  
  width: 30%;	
}

ul.navi li p{
	  display: none;
}	
	
	
	
	}





/***************************************

上部画像

***************************************/


#pagetop {
	margin: 0 auto;
	width: 100%;
	max-width: 1600px;
	padding-top:90px;
}
#pagetop img {
	margin: 0 auto;
	width: 100%;
}
#pagetop img.YP {
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	padding-top: 100px;
}

@media (max-width:768px) {
	
#pagetop {
	padding-top: 10%;
	
}
#pagetop img {
	margin: 0 auto;
}
#pagetop img.YP {
	padding-top: 0px;
	width:80%;
	padding-top:20px;
	
}
}


/********** PC・スマホ切り替え **********/
 
@media (max-width:735px) {
.pc {
	display: none;
}
}

@media (min-width:736px) {
.sp {
	display: none;
}
}



/***************************************

CONTENTS

***************************************/


/*----------------------------------
はじめ
----------------------------------*/

section.phase_001{
	width: 90%;
	margin: 0% auto 0 ;
	overflow: hidden;
}

h1{
padding: 7%	0 0%; 
font-size: 2.2rem;
text-align: center;
font-family: 'Noto Serif SC', serif;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	
letter-spacing: 0.3rem;	
line-height: 3.5rem;	
}


img.topimg{
width:100%;
max-width: 100%;
height: auto;
}

article{
	
	width: 100%;
	margin: 0% auto;
}





p.title_Disp{
	margin: 3.5% auto;
	width: 40%;
	font-size: .95rem;
	line-height: 2rem;
	font-weight: 500;
	text-align: center;	
	
}

.title_Disp_red{
	margin: 3.5% auto;
	width: 40%;
	font-size: .7rem;
	line-height: 2rem;
	font-weight: 500;
	text-align: center;	
	color: #D51114!important;
	
}

.title_Disp_weighB {

font-weight: bold; 
font-size: 1.3rem;	
}

.GET_coupon{
	
	width: 20%;
	border: 3px solid #333;
	padding: 1% 0;
	margin: -3% auto 1%;
	text-align: center;
	font-size: .95rem;
	font-weight: 900;
}

.marker {
 background: linear-gradient(transparent 40%, #edde7b 45%);
font-weight: bold; 
font-size: 1.2rem;	
}

p.point_jump
{
	
	border: 2px solid #555;
	width: 8%;
	margin: 0 auto;
	font-size: .7rem;
	line-height: 2rem;
	font-weight: 500;
	text-align: center!important;
}








@media (max-width:768px) {
	
	
	section.phase_001{
	width: 90%;
	margin:9% auto 0 ;
	background: #fff;
	overflow: hidden;
}
	
	
h1{
padding: 3%	0; 
font-size: 1.3rem;
text-align: center;	
letter-spacing: 0.2rem;	
line-height: 1.4rem
	
}


img.topimg{
width:100%;
max-width: 100%;
height: auto;
}

article{
	
	width: 100%;
	margin: 0% auto;
}




p.title_Disp{
	margin: 8% auto;
	width: 98%;
	font-size: .8rem;
	line-height: 1.5rem
	
}



.title_Disp_red{
	margin: 3.5% auto;
	width: 40%;
	font-size: .7rem;
	line-height: 2rem;
	font-weight: 500;
	text-align: center;	
	color: #D51114!important;
	
}

.title_Disp_weighB {

font-weight: bold; 
font-size: .8rem;	
}

.GET_coupon{
	
	width: 90%;
	border: 3px solid #333;
	padding: 3% 0;
	margin: -3% auto 1%;
	text-align: center;
	font-size: .95rem;
	font-weight: 900;
}

.marker {
 background: linear-gradient(transparent 40%, #edde7b 45%);
font-weight: bold; 
font-size: 1.2rem;	
}
	
}


/*----------------------------------
メニュー　section2
----------------------------------*/

section.phase_002{
	width: 100%;
	margin: 5% auto 0 ;
	overflow: hidden;
	padding: 4% 0 2% 0;
	background: #f1f0ec;
}




.step{
	
font-size: 1.5rem;	
letter-spacing: 0.2rem;	
text-align: center;	
font-weight: 900;	
margin-top: -2%;
	
}

.coupon{
	margin: 0 auto;
	text-align: center;
	font-size: .8rem;	
}


ul.coupon_Disp{
	font-size: .9rem;
	text-align: left;
	margin: 5% auto;
	width: 43%;
	
}

ul.coupon_Disp li{
	width: 100%;
	line-height: 1.5rem;
	letter-spacing: 0.1rem;
	margin-bottom: 1rem;
	font-weight: 500;
	
	
}

li.coupon_Disp_B{
	font-weight: 900!important;
	font-size: 1.0rem;
	
	
}

li.red{
	color: #C30408;
}



/* ボタン */

.button {
	width: 45%;
	outline: none;
	border-radius: 10px;
	padding: 1% 1% 1%;
	font-size: 0.9rem;
	display: block;
	margin: .3% auto 0;
	color: #fff;
	text-align: center;
}
.button::before, .button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button, .button::before, .button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button:hover {
	opacity: 1;
}
.button span {
	font-size: 1rem;
	font-weight: bold;
}

.b_red {
	background-color: #c00;
	border: 3px solid #c00;
}
.b_red:hover {
	background-color: #fff;
	border-color: #c00;
	color: #c00;
	opacity: 1;
}
.b_blk {	
	background-color: #363636;
	border: 3px solid #363636;
}
.b_blk:hover {
	background-color: #fff;
	border-color: #363636;
	color: #363636;
	opacity: 1;
}

/**yahoo**/

.keyword{
	font-size: 1.0rem;
	text-align: center;
	margin: 3% auto 0;
	width: 43%;
	color: #8E8645;
	
}

.keyword_b{
	font-size: 1.5rem;
	text-align: center;
	margin:1% auto;
	font-weight: 900;
	color: #8E8645;
	
}


.keyword_Disp{
	font-size: .9rem;
	text-align: left;
	margin: 3% auto 0;
	width: 35%;
	letter-spacing: 0.1rem;
	line-height: 1.7rem;
	
	
}


.key_img{
	width: 45%;
	margin: 2% auto;
}

.key_img img{
	width: 100%;
}

@media (max-width:735px) {
	
	

section.phase_002{
	width: 100%;
	margin: 5% auto 0 ;
	overflow: hidden;
	padding: 4% 0 2% 0;
	background: #f1f0ec;
}




.step{
	
font-size: 1.5rem;	
letter-spacing: 0.2rem;	
text-align: center;	
font-weight: 900;	
margin-top: 5%;
	
}

.coupon{
	margin: 0 auto;
	text-align: center;
	font-size: .8rem;	
}

	.coupon img{
		width: 80%;
		margin: 0 auto;
	}
	
	
	
ul.coupon_Disp{
	font-size: .8rem;
	text-align: left;
	margin: 7% auto 5% -23px;
	width: 90%;
	
}

ul.coupon_Disp li{
	width: 100%;
	line-height: 1.4rem;
	letter-spacing: 0.1rem;
	margin-bottom: 1rem;
	font-weight: 500;
	
	
}

li.coupon_Disp_B{
	font-weight: 900!important;
	font-size: 1.0rem;
	
	
}

li.red{
	color: #C30408;
}	
	
	
.button {
	width: 80%;
	line-height: 180%;
	font-size: 0.7rem;
}
.button span {
	font-size: 0.9rem;
	font-weight: bold;
}
	
	
	
/**yahoo**/

.keyword{
	font-size: 1.0rem;
	text-align: center;
	margin: 5% auto 0;
	width: 90%;
	color: #8E8645;
	
}

.keyword_b{
	font-size: 1.5rem;
	text-align: center;
	margin:2% auto;
	font-weight: 900;
	color: #8E8645;
	
}


.keyword_Disp{
	font-size: .9rem;
	text-align: left;
	margin: 3% auto 0;
	width: 90%;
	letter-spacing: 0.1rem;
	line-height: 1.5rem;
	
	
}


.key_img{
	width: 90%;
	margin: 2% auto;
}

.key_img img{
	width: 100%;
}	
	
}

/*----------------------------------
コンテンツ　section3
----------------------------------*/


section.phase_003{
	width: 100%;
	margin: 5% auto 0 ;
	overflow: hidden;
	padding: 4% 0 2% 0;
	background: #fff;
	text-align: center;
	
}




.step2{
	
font-size: 1.5rem;	
letter-spacing: 0.2rem;	
text-align: center;	
font-weight: 900;	
margin-top: -2%;}
	

.text_Disp{
	width: 50%;	
	margin: 3% auto;
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.8rem;
	letter-spacing: .1rem;
	text-align: center;		
	
}

img.Jump_img{
	width: 40%;
	
}

@media (max-width:735px) {
	
section.phase_003{
	width: 100%;
	margin: 5% auto 0 ;
	overflow: hidden;
	padding: 4% 0 2% 0;
	background: #fff;
	text-align: center;
	
}




.step2{
	
font-size: 1.5rem;	
letter-spacing: 0.2rem;	
text-align: center;	
font-weight: 900;	
margin-top: 5%;}
	

.text_Disp{
	width: 90%;	
	margin: 3% auto;
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.8rem;
	letter-spacing: .1rem;
	text-align: left;		
	
}

img.Jump_img{
	width: 80%;
	
}	
}

/*----------------------------------
コンテンツ　section4
----------------------------------*/


section.phase_004{
	width: 100%;
	margin: 5% auto 0 ;
	overflow: hidden;
	padding: 4% 0 2% 0;
	background: #f1f0ec;
	text-align: center;
}


h2{
	
font-size: 1.4rem;	
letter-spacing: 0.2rem;	
margin-top: 2%;	
text-align: center;	
font-weight: 800;	
}


.title_Disp_weighSB{
	
font-weight: bold; 
font-size: 1.1rem;
text-decoration: underline;
	
}


img.Inst_img{
	width: 30%;
	
}

ul.stories_Disp{
	
	text-align: center;
	font-size: .9rem;
	
	margin: 5% auto;
	width: 43%;
}

ul.stories_Disp li{
	width: 100%;
	line-height: 1.5rem;
	letter-spacing: 0.1rem;
	margin-bottom: 1rem;
	font-weight: 500;
	
	
}

img.Sto_img{
	width: 75%;
	
	
}

@media (max-width:735px) {
	

section.phase_004{
	width: 100%;
	margin: 5% auto 0 ;
	overflow: hidden;
	padding: 4% 0 2% 0;
	background: #f1f0ec;
	text-align: center;
}


h2{
	
font-size: 1.3rem;	
letter-spacing: 0.2rem;	
line-height: 1.5em;
text-align: left;	
font-weight: 800;	
width: 90%;	
margin: 2% auto;	
}


.title_Disp_weighSB{
	
width: 90%;		
	
font-weight: bold; 
font-size: 1.0rem;
text-decoration: underline;
	
}


img.Inst_img{
	width: 100%;
	
}

ul.stories_Disp{
	
	text-align: left;
	font-size: .9rem;
	
	margin: 7% auto 5% -23px;
	width: 90%;
}

ul.stories_Disp li{
	width: 100%;
	line-height: 1.5rem;
	letter-spacing: 0.1rem;
	margin-bottom: 1rem;
	font-weight: 500;
	
	
}

img.Sto_img{
	width: 100%;
	
	
}
	
}

/***************************************

アテンション

***************************************/



section.howto {
	width: 45%;
	overflow: hidden;
	margin: 8% auto;
}




.howto_title {
	font-size: 1.5rem;
	font-weight: 700;
	border-left: solid 8px #7ED9D5;
	padding-left: 1%;
	line-height: 1.2;
	letter-spacing: 0.1rem;
	margin-bottom: 1%;
	font-weight: normal;
}

.howto_Disp{
	
	width: 100%;
	margin:3% auto 1%;
	font-size: 1.0rem;
	line-height: 2rem;
	font-weight: 500;
	text-align: left;
	letter-spacing: 0.1rem;
	
}

div.caution {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding-bottom: 10px;
}

.rule{

width: 100%;
margin:0 auto;
border-collapse: collapse;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
	


}
.rule th{
width:20%;
padding: 1%;
text-align: center;
border-bottom: 1px solid #999;
border-left: 1px solid #ccc;
font-size:0.9rem;
}


.rule td{
width:80%;
text-align:left;
line-height:2.5rem;
padding:10px 5px 10px 5px;
border-bottom: 1px solid #999;
border-left: 1px solid #ccc;
font-size:0.9rem;
}

.table_red{
	
	color: #D9191C;
	font-weight: 600;
}





@media (max-width:735px) {

	
	
section.howto {
	width: 90%;
	overflow: hidden;
	margin: 8% auto;
}




.howto_title {
	font-size: 1.5rem;
	font-weight: 700;
	border-left: solid 8px #7ED9D5;
	padding-left: 1%;
	line-height: 1.2rem;
	letter-spacing: 0.1rem;
	margin-bottom: 1%;
	font-weight: normal;
}

.howto_Disp{
	
	width: 100%;
	margin:3% auto 1%;
	font-size: 1.0rem;
	line-height: 2rem;
	font-weight: 500;
	text-align: left;
	letter-spacing: 0.1rem;
	
	
}

div.caution {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding-bottom: 10px;
}

.rule{

width: 100%;
margin:0 auto;
border-collapse: collapse;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
	


}
.rule th{
width:20%;
padding: 1%;
text-align: center;
border-bottom: 1px solid #999;
border-left: 1px solid #ccc;
font-size:0.9rem;
}


.rule td{
width:80%;
text-align:left;
line-height:1.8rem;
padding:10px 5px 10px 5px;
border-bottom: 1px solid #999;
border-left: 1px solid #ccc;
font-size:0.85rem;
}

.table_red{
	
	color: #D9191C;
	font-weight: 600;
}
	
}




/***************************************

サイド固定

***************************************/




#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 2%;
  bottom: 2%;
  background: #193446;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


/***************************************

1200円タブ

***************************************/




/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 98%;
  margin: 0 auto;}


/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 1.2rem;
  font-size: 1.1rem;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  
  	
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}


/***************************************

footer

***************************************/


footer{
	width: 100%;
	margin: 0 auto;
	text-align: center;	
}


footer.p{
	font-size: 1.3rem;
	
	margin: 2% 0 ;
}