@charset "utf-8";

.Noto_r {

	font-family: noto-sans-cjk-jp, sans-serif;

	font-weight: 400;

	font-style: normal;

}

.Noto_b {

	font-family: noto-sans-cjk-jp, sans-serif;

	font-weight: 700;

	font-style: normal;

}

.wrap_all {

	margin: 0 auto;

	background: url("../images/background.jpg")repeat-y;

	background-size: contain;

}

.wrap_all_in {

	background-size: cover;

}

.head {

	background-color: #356c2c;

	align-items: center;

	padding: 20px 0;

	z-index: 100;

}

ul.head li.left {

	width: 23%;

	float: left;

	margin-top: 1%;

	margin-left: 5%;

}

ul.head li.center {

	width: 4%;

	margin: 0 auto;

}

.main {

	clear: both;

}

.head_lead {

	position: relative;

}

.head_lead img {

	mix-blend-mode: multiply;

}

.header001 {

	width: 35%;

	position: absolute;

	bottom: 41%;

	left: 32%;

	mix-blend-mode: normal !important;

}

.header002 {

	width: 20%;

	position: absolute;

	bottom: 65%;

	left: 8%;

	mix-blend-mode: normal !important;

}

.header003 {

	width: 18%;

	position: absolute;

	bottom: 14%;

	left: 72%;

	mix-blend-mode: normal !important;

}

.header004 {

	width: 17%;

	position: absolute;

	bottom: 61%;

	left: 71%;

	mix-blend-mode: normal !important;

}

.header005 {

	width: 16%;

	position: absolute;

	bottom: 39%;

	left: 14%;

	mix-blend-mode: normal !important;

}

.header006 {

	width: 16%;

	position: absolute;

	bottom: 40%;

	left: 69%;

	mix-blend-mode: normal !important;

}

.header007 {

	width: 18%;

	position: absolute;

	bottom: 15%;

	left: 10%;

	mix-blend-mode: normal !important;

}

.leaf010 {

	position: absolute;

	width: 20%;

	bottom: -96%;

	left: 80%;

}

.leaf020 {

	position: absolute;

	width: 20%;

	bottom: -181%;

}

.happy {

	bottom: 0;

	left: 0;

	text-align: center;

	color: #356c2c;

	font-size: 1.6rem;

	position: static;

	transform: translate(0, 0);

	-webkit-transform: translate(0, 0);

	-ms-transform: translate(0, 0);

	margin-bottom: 85px;

	margin-top: -22%;

	letter-spacing: 6px;

}

.happy .days {

	line-height: 2;

	font-size: 2rem;

	margin-bottom: 10px;

}

.main_in {

	position: relative;

}

.main_in .right_d_po {

	position: absolute;

	width: 20%;

	right: 10px;

}

.main_in .left_d_po {

	position: absolute;

	width: 20%;

	left: 10px;

	top: 500px;

}

.hafu {

	width: 43%;

	margin: 6% auto 70px;

	position: relative;

}

ul.coupon001 {

	width: 50%;

	margin: 0 auto 150px;

	position: relative;

}

ul.coupon001 li {

	width: 49%;

	float: left;

}

ul.coupon001 li:nth-child(2) {

	float: right;

}

.heading_b {

	width: 50%;

	max-width: 1100px;

	margin: 0 auto 120px;

	position: relative;

}

.heading_b .leaf_left {

	display: inline-block;

	width: 24%;

	vertical-align: top;

	padding-top: 10px;

}

.heading_b h2 {

	display: inline-block;

	width: 50%;

}

.heading_b .leaf_right {

	display: inline-block;

	width: 24%;

	vertical-align: top;

	padding-top: 10px;

}

.heading_b.text_h200 .leaf_left {

	padding-top: 0;

}

.heading_b.text_h200 .leaf_right {

	padding-top: 0;

}

h2 {

	text-align: center;

	line-height: 25px;

}

h2 span {

	font-size: 1.7rem;

	line-height: 1.2;

	text-align: center;

	display: inline-block;

	color: #432b12;

	letter-spacing: 13px;

	margin-right: -13px;

}

h2.text002 span {}

.shopbox {

	background-color: #fffbf7;

	border-radius: 10px;

	width: 59%;

	margin: 0 auto 120px;

	position: relative;

}

.shopbox_in {

	border-radius: 10px;

	box-shadow: 0 0 0 12px #fffbf7;

	border: 2px dashed #21451b;

}

ul.get001 {

	width: 86%;

	margin: 0 auto;

	padding-top: 80px;

	padding-bottom: 20px;

}

ul.get001 li {

	margin-bottom: 80px;

}

ul.get001 li .gbox001 {

	float: left;

	width: 70%;

	margin-left: 3%;

}

ul.get001 li p {

	margin-left: 2.3em;

}

ul.get001 li p.titleh1 {

	position: relative;

	line-height: 1.5em;

	margin-left: 3em;

	font-size: 1.5em;

	font-weight: 600;

	margin-left: 1.5em;

	margin-bottom: 10px;

	letter-spacing: 4px;

}

ul.get001 li p.titleh1::before {

	content: "";

	display: inline-block;

	width: 1.9em;

	height: 1.9em;

	background: url("../images/coupon_one_pc.png") no-repeat;

	background-size: contain;

	position: absolute;

	left: -2.4em;

	top: -5px;

}

ul.get001 li p.titleh1.coupon_two::before {

	content: "";

	display: inline-block;

	width: 1.9em;

	height: 1.9em;

	background: url("../images/coupon_two_pc.png") no-repeat;

	background-size: contain;

	position: absolute;

	left: -2.4em;

	top: -5px;

}

ul.get001 li p.titleh1.coupon_three::before {

	content: "";

	display: inline-block;

	width: 1.9em;

	height: 1.9em;

	background: url("../images/coupon_three_pc.png") no-repeat;

	background-size: contain;

	position: absolute;

	left: -2.4em;

	top: -5px;

}

ul.get001 li p.titleh1 .t_green {

	color: #009846;

}

ul.get001 li p.lead_h1 {

	letter-spacing: 3px;

}

ul.get001 li .gright_p {

	float: right;

	width: 22%;

}

/*タブ切り替え全体のスタイル*/



.tabs {

	margin: 70px auto 45px;

	width: 79%;

}

/*タブのスタイル*/



.tab_item {

	background-color: #d9d9d9;

	line-height: 60px;

	font-size: 1rem;

	text-align: center;

	border-radius: 100px;

	width: 46%;

	letter-spacing: 2px;

}

.tab_item.tab_style01 {

	background-color: #ffffff;

	color: #356e2c;

	border: 2px solid #356e2c;

	border-bottom: 5px solid #356e2c;

	float: left;

	margin-left: 2%;

}

.tab_item.tab_style02 {

	background-color: #ffffff;

	color: #db6d03;

	border: 2px solid #db6d03;

	border-bottom: 5px solid #db6d03;

	float: right;

	margin-right: 2%;

}

.tab_item:hover {

	/* opacity: 0.75; */

}

.tab_item .buttom {

	width: 91%;

	margin: 0 auto;

}

/*ラジオボタンを全て消す*/



input[name="tab_item"] {

	display: none;

}

/*タブ切り替えの中身のスタイル*/



.tab_content {

	display: none;

	padding: 40px 0 0;

	clear: both;

	overflow: hidden;

}

/*選択されているタブのコンテンツのみを表示*/



#all:checked~#all_content, #programming:checked~#programming_content, #design:checked~#design_content {

	display: block;

}

/*選択されているタブのスタイルを変える*/



.tabs input:checked+.tab_item.tab_style01 {

	background-color: #356e2c;

	color: #fff;

	border: 2px solid #1a3415;

	border-bottom: 5px solid #1a3415;

}

.tabs input:checked+.tab_item.tab_style02 {

	background-color: #db6d03;

	color: #fff;

	border: 2px solid #954800;

	border-bottom: 5px solid #954800;

}

.listbox {

	width: 45%;

	margin-bottom: 14px;

}

.listbox:nth-child(odd) {

	float: left;

	margin-left: 14px;

}

.listbox:nth-child(even) {

	float: right;

	margin-right: 14px;

}

.listbox a:hover p {

	opacity: 0.7;

}

.listbox p {

	bottom: 0;

	background-color: #21451b;

	color: #ffffff;

	width: 100%;

	text-align: center;

	border-radius: 0 0 10px 10px;

	padding: 10px 0;

}

.pstyle001 .listbox p {

	background-color: #954800;

}

.shopbox.second001 {

	margin-bottom: 200px;

}

.rights {

	background-color: #ffffff;

	padding: 3% 0 3% 9%;

}

.rights img {

	width: 33%;

	margin-right: 4%;

	float: left;

}

.rights p {

	font-size: 0.6em;

	line-height: 1;

	margin-top: 1%;

	letter-spacing: 1px;

}

.frend002 {

	width: 46%;

	margin: 0 auto 20px;

	display: block;

}

a.frend002:hover img {

	/* opacity: 0.7; */

}

.frend002 span {

	width: 1.6em;

	display: inline-block;

}

.button {

	position: fixed;

	right: 27%;

	bottom: 0;

	transition: .3s;

	/*デフォルトで非表示にする*/

	opacity: 0;

	visibility: hidden;

}

/*このクラスが付与されると表示する*/



.active {

	opacity: 1;

	visibility: visible;

}

/*このクラスが付与されると表示する*/



.absolute {

	opacity: 1;

	visibility: visible;

	bottom: 11%;

}

@media screen and (max-width: 767px) {

	.wrap_all {

		background: url("../images/background.jpg")repeat-y;

	}

	.head {

		padding: 3% 10px;

		height: 31px;

	}

	ul.head li.left {

		width: 44%;

		float: left;

		margin-top: -3px;

		margin-left: 0;

	}

	ul.head li.center {

		width: 7%;

		float: right;

	}

	.head_lead {

		margin-bottom: 10%;

	}

	.header001 {

		width: 61%;

		bottom: -34%;

		left: 20%;

	}

	.header002 {

		width: 20%;

		bottom: 30%;

		left: 26%;

	}

	.header003 {

		width: 24%;

		bottom: -38%;

		left: 2%;

	}

	.header004 {

		width: 17%;

		bottom: 27%;

		left: 56%;

	}

	.header005 {

		width: 19%;

		bottom: 11%;

		left: 78%;

	}

	.header006 {

		width: 23%;

		bottom: -35%;

		left: 74%;

	}

	.header007 {

		width: 24%;

		bottom: 9%;

		left: -1%;

	}

	.happy {

		bottom: 0;

		left: 0;

		text-align: center;

		color: #356c2c;

		font-size: 0.9rem;

		position: static;

		transform: translate(0, 0);

		-webkit-transform: translate(0, 0);

		-ms-transform: translate(0, 0);

		margin-bottom: 85px;

		margin: 0;

		letter-spacing: 1px;

		line-height: 1.4;

	}

	.happy .days {

		line-height: 1.4;

		font-size: 1.1rem;

		margin-bottom: 10px;

	}

	.hafu {

		width: 84%;

		margin-top: 50px;

	}

	ul.coupon001 {

		width: 82%;

		margin: 0 auto 60px;

	}

	ul.coupon001 li {

		width: 100%;

		float: none;

	}

	ul.coupon001 li:nth-child(2) {

		float: none;

		margin-top: 20px;

	}

	h2 {

		line-height: 25px;

		width: 100%;

		margin: 0;

		background: none;

		-webkit-background-size: unset;

		background-size: unset;

		background-position: unset;

		height: unset;

	}

	h2 span {

		font-size: 1.1rem;

		line-height: 1.5;

		text-align: center;

		display: inline-block;

		color: #432b12;

		padding: 5px 0;

	}

	.heading_b {

		width: 85%;

		max-width: 1100px;

		margin: 0 auto 50px;

		position: relative;

	}

	.heading_b .leaf_left {

		display: block;

		width: 65%;

		vertical-align: unset;

		padding-top: 0;

		margin: 0 auto;

	}

	.heading_b h2 {

		display: block;

		width: 100%;

		text-align: center;

	}

	.heading_b .leaf_right {

		display: block;

		width: 65%;

		vertical-align: unset;

		padding-top: 0;

		margin: 0 auto;

	}

	.shopbox {

		width: 85%;

		margin-bottom: 70px;

	}

	.head_lead img {

		margin-bottom: 27%;

	}

	ul.get001 {

		padding-top: 45px;

		padding-bottom: 0;

	}

	ul.get001 li p.titleh1::before {

		content: "";

		display: none;

	}

	ul.get001 li p.titleh1.coupon_two::before {

		content: "";

		display: none;

	}

	ul.get001 li p.titleh1.coupon_three::before {

		content: "";

		display: none;

	}

	ul.get001 li .gbox001 {

		float: none;

		width: 100%;

		margin: 0 auto;

	}

	ul.get001 li p.titleh1 {

		position: unset;

		margin-left: 0;

		margin-bottom: 10px;

		font-size: 1em;

	}

	ul.get001 li p {

		margin-left: 0;

		letter-spacing: normal;

	}

	ul.get001 li p.lead_h1 {

		margin-bottom: 30px;

		font-size: 0.8em;

		line-height: 1.6;

	}

	ul.get001 li .gright_p {

		float: none;

		width: 92%;

		margin: 0 auto;

	}

	ul.get001 li .gban {

		width: 100%;

		background-color: #356c2c;

		color: #ffffff;

		text-align: center;

		border-radius: 100px;

		margin: 0 auto 20px;

		font-weight: 600;

		line-height: 3;

	}

	ul.get001 li .frend001 {

		margin: 0 auto 40px;

		display: block;

	}

	ul.get001 li {

		margin-bottom: 30px;

	}

	.tabs {

		width: 99%;

		margin-top: 0;

		padding-top: 40px;

	}

	.tab_item {

		width: 84%;

		margin: 0 auto 20px;

		line-height: 50px;

		display: block;

	}

	.tab_content {

		padding: 0 10px;

	}

	.shopbox.second001 {

    margin-bottom: 40%;

	}

	.listbox {

		width: 100%;

	}

	.listbox:nth-child(odd), .listbox:nth-child(even) {

		margin-left: 0;

		margin-right: 0;

		float: none;

	}

	.tab_item.tab_style01 {

		float: none;

		margin-left: 7.5%;

	}

	.tab_item.tab_style02 {

		float: none;

		margin-right: 7.5%;

	}

	.tabs input:checked+.tab_item.tab_style01 {

		float: none;

	}

	.tabs input:checked+.tab_item.tab_style02 {

		float: none;

	}

	.frend002 {

		width: 94%;

	}

	a.frend002:hover {

    opacity: 1;

	}

	.rights {

		padding: 5% 3%6%;

	}

	.rights img {

		float: none;

		width: 75%;

		margin: 0 auto 5%;

		display: block;

	}

	.rights p {

		text-align: center;

	}

	.button {

		right: 3%;

		bottom: 0;

	}

	.absolute {

		bottom: 16%;

	}

}

@media screen and (min-width: 768px) and (max-width: 1400px) {

	.happy {

		font-size: 1rem;

	}

	.happy .days {

		font-size: 1.4rem;

	}

}

@media screen and (min-width: 768px) and (max-width: 930px) {

	.happy {

		letter-spacing: 3px;

	}

}

@media screen and (min-width: 768px) and (max-width: 1130px) {

	h2 span {

		letter-spacing: 3px;

	}

}

@media screen and (min-width: 768px) and (max-width: 865px) {

	.tab_item {

		font-size: 0.9rem;

		border-radius: 30px;

		width: 46%;

		letter-spacing: 0;

	}

}