@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
/*-----------------------------------------------------
全体共通
-------------------------------------------------------*/
p, h1, h2, h3, h4, h5, h6, a, li, caption, td, th, dt, dd, input, textarea, select, div, address  {
font-family:Roboto,"Noto Sans JP","メイリオ",Meiryo,sans-serif!important;
color: #000;
}


body {
	background-color: #fff000;
	@extend html;
}
h1, h2, h3, h4, h5, h6, strong {
	font-weight: bold;
	font-weight: 700;
}



a {
	text-decoration: underline;
	color: #036eb7;
	font-weight: bold;
	font-weight: 700;
}
.caution-txt a {
	text-decoration: underline!important;
	color: #C21B1E!important;
}
sup {
font-size: 10px;
vertical-align: top;
}
.anchorlink {
	font-size: 0;
	line-height: 1;
}
.clearfix {
	zoom: 1;
	min-height: 1px;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.txt-j {
text-align: justify;
}

/*====================================================================
 pagetopbtn_common
====================================================================*/
#ptbtn {
	position:fixed;
	bottom: 30px;
	right:5px;
	display:none;
	z-index:1000;
}

header {
background-color: #fff;
width: 100%;
margin: 0 auto;
border-top:3px #FABE00 solid;
}
header #hd_logo {
padding: 10px;
text-align: left;
background-color: #fff462;
}
header #hd_logo img {
max-width: 243px;
}

footer {
width: 100%;
margin: 0 auto;
padding: 15px 0 50px 0;
background-color: #fabe00;
}
#copyright {
font-size: 12px;
text-align: center;
padding: 10px 0 0;
}
#yw_top {
margin: 0 auto;
text-align: center;
padding-top: 10px;
}
#yw_top img {
max-width: 149px;
width: 70%;
}




/* 768px以下 スマホ向け
--------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
body {
	-webkit-text-size-adjust: 100%;
	min-width: 320px;
	line-height: 1.6;
	font-size: 13px;
}
div img {
	max-width: 100%;
	height: auto;
	width: 100%;
}
a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.part_pc {
	display: none!Important;
}
#wrapper {
}
h1 {
display: none;
font-size: 0;
}
/*-----------------------------------------------------
contents
-------------------------------------------------------*/
.contents {
	padding: 20px 0;
	width: 92%;
	margin: 0 auto;
	background-image: url(http://www.yellowhat.jp/campaign/202002/img/bg.jpg);
	background-position: top center;
	background-repeat: repeat-y;
}
.contents2 {
	padding: 0;
	width: 92%;
	margin: 0 auto;
	background-image: url(http://www.yellowhat.jp/campaign/202002/img/bg.jpg);
	background-position: top center;
	background-repeat: repeat-y;
}

#statement,#last-year {
background-color: #006934;
}
header #hd_logo img {
max-width: 130px;
}

#main-v {
}
#main-v ul.subnav {
display: table;
table-layout: fixed;
margin: 0 auto;
border-collapse: separate;
border-spacing: 2px 2px;
width: 60%;
}
#main-v ul.subnav li {
display: table-cell;
}
#main-v ul.subnav li img {
width: 100%;
}


h2 {
font-size: 20px;
color: #006934;
text-align: center;
line-height: 1.5;
padding:0 10px 10px;
}
.st-txt {
font-size: 14px;
color: #006934;
text-align: center;
line-height:1.8;
font-weight: bold;
font-weight: 700;
padding: 10px;
}
.catch {
font-size: 14px;
color: #006934;
text-align: center;
line-height: 2;
font-weight: bold;
font-weight: 700;
}
.lead {
font-size: 13px;
color: #000;
text-align: left;
padding: 10px;
line-height: 1.5;
font-weight: bold;
font-weight: 700;
}


h3 {
text-align: center;
font-size: 16px;
color: #fff;
padding: 10px 0;
background-color: #006934;
line-height: 1.4;
width: 100%;
margin: 0 auto;
}
h3 span {
font-size: 13px;
}
h3 {
  background-image: 
    url(http://www.yellowhat.jp/campaign/202002/img/ft.svg),
    url(http://www.yellowhat.jp/campaign/202002/img/ft2.svg);

  background-position:
    left 10px center,
    right 10px center;

  background-repeat:
    no-repeat,
    no-repeat;

  background-size:
    14px;
}
h4 {
font-size: 15px;
line-height: 1.5;
}


.cap1 {
font-size: 10px;
color: #222;
line-height: 1.5;
text-align: left;
padding: 10px 0 20px;
}
.neko_cap {
font-size: 12px;
color: #222;
line-height: 1.5;
text-align: left;
padding: 10px 0 20px;
font-weight: bold;
font-weight: 700;
}
.cap2 {
font-size: 10px;
color: #222;
line-height: 1.5;
text-align: left;
padding: 10px 0;
}
.cap3 {
font-size: 10px;
color: #222;
line-height: 1.5;
text-align: left;
padding: 10px 0;
}


.tb-box1 {
width: 92%;
margin: 0 auto;
display: block;
}
.tb-box1 .img-box {
width: 100%;
}
.tb-box1 .img-box img {
width: 100%;
}
.tb-box1 .txt-box {
width: 100%;
}

.tb-box1 .txt-box ul li {
float: none;
margin: 20px auto;
text-align: center;
}
.tb-box1 .txt-box ul li img {
width: 100%;
}
.tb-box1 .txt-box .img-howto {
width: 100%;
margin: 20px auto;
}
.tb-box1 .txt-box .img-howto img {
width: 100%;
}

.tb-box1 .howto {
font-size: 14px;
line-height: 1.5;
font-weight: bold;
font-weight: 700;
}

.tb-box2 {
width: 92%;
margin: 0 auto;
display: block;
}
.tb-box2 .img-box {
width: 100%;
}
.tb-box2 .img-box img {
width: 100%;
margin-bottom: 20px;
}
.tb-box2 .txt-box {
width: 100%;
}
.tb-box2 .txt-box .point1,
.tb-box2 .txt-box .point2{
font-size: 15px;
color: #000;
font-weight: bold;
font-weight: 700;
line-height: 1;
padding-bottom: 10px;
}
.tb-box2 .txt-box .point1:before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 32px;
  background-image: url(http://www.yellowhat.jp/campaign/202002/img/icon_point1.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
}
.tb-box2 .txt-box .point2:before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 32px;
  background-image: url(http://www.yellowhat.jp/campaign/202002/img/icon_point2.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
}
.tb-box2 .txt-box .point-honbun {
font-size: 12px;
color: #222;
line-height: 1.8;
padding-bottom: 10px;
}
.tb-box3 {
width: 100%;
margin: 0 auto;
display: block;
}
.tb-box3 .img-box {
width: 100%;
margin-bottom: 20px;
}
.tb-box3 .img-box img {
width: 100%;
}
.tb-box3 .txt-box {
display: block;
}
.tb-box3 .txt-box .pre-honbun {
font-size: 13px;
font-weight: bold;
font-weight: 700;
color: #222;
line-height: 1.8;
}

.tb-box3 .txt-box .pre-honbun span {
background:linear-gradient(transparent 60%, #FFFF00 0%);
}

.kakomi1 {
width: 88%;
margin: 20px auto;
border:2px solid #006934;
border-radius: 10px;
background-color: #fff000;
padding: 10px;
}
.kakomi1 h5 {
font-size: 15px;
color: #006934;
padding-bottom: 10px;
border-bottom: 2px solid #006934;
margin-bottom: 10px;
text-align: center;
font-weight: bold;
font-weight: 700;
}
.kakomi1 .kakomi-txt {
font-size: 13px;
color: #000;
line-height: 1.5;
text-align: left;
}
.kakomi1 .netprint {
width: 100%;
margin: 0 auto;
padding: 10px 0 0;
text-align: left;
}
.kakomi1 .netprint .print-num {
font-size: 13px;
color: #000;
font-weight: bold;
font-weight: 700;
line-height: 1.8;
}
.dwl-pdf {
padding: 10px;
text-align: left;
font-size: 13px;
font-weight: bold;
font-weight: 700;
}
.w800 {
width: 92%;
margin: 0 auto;
}

.kakomi2 {
width: 88%;
margin: 30px auto 0;
border:2px solid #006934;
border-radius: 10px;
background-color: #fff;
padding: 10px;
}
.kakomi2 h5 {
font-size: 15px;
color: #006934;
padding-bottom: 10px;
border-bottom: 2px solid #006934;
margin-bottom: 10px;
text-align: center;
}
.kakomi2 .kakomi-txt2 {
font-size: 12px;
color: #222;
line-height: 1.5;
}
.kakomi2 .img-camp {
width: 100%;
margin: 0 auto 10px;
}
.kakomi2 .img-camp img {
width: 100%;
}

.kakomi3 {
width: 88%;
margin: 30px auto 0;
border-radius: 10px;
background-color: #006934;
padding: 10px;
position: relative;
}
.kakomi3 h5 {
font-size: 15px;
color: #fff;
padding-bottom: 10px;
border-bottom: 1px solid #fff;
margin-bottom: 10px;
text-align: left;
line-height: 1.5;
}
.kakomi3 h5 span {
color: #fff000;
}
.kakomi3 .kakomi-txt3 {
font-size: 12px;
color: #fff;
line-height: 1.5;
padding: 10px 0 0;
}
.kakomi3 .nyan-icon {
display: block;
width: 100%;
margin: 10px auto 0;
text-align: right;
}
.kakomi3 .nyan-icon img {
width: 100px;
}



.kakomi4 {
width: 88%;
margin: 30px auto 0;
border:2px solid #006934;
border-radius: 10px;
background-color: #fff;
padding: 10px 10px 0;
}
.kakomi4 h5 {
font-size: 15px;
color: #006934;
padding-bottom: 5px;
border-bottom: 2px solid #006934;
margin-bottom: 20px;
text-align: left;
}
.kakomi4 h5 span {
color: #fff000;
background-color: #006934;
padding: 5px 10px;
border-radius: 5px;
margin-right: 5px;
font-size: 13px;
}




.date {
font-size: 20px;
color: #fff;
text-align: center;
padding: 10px;
font-weight: bold;
font-weight: 700;
}
.date span {
font-size: 16px;
}
.date-block {
width: 92%;
margin: 50px auto 10px;
background-color: #006934;
}
.boshu-honbun {
font-size: 18px;
color: #006934;
font-weight: bold;
font-weight: 700;
text-align: center;
line-height: 1.8;
padding: 10px;
}
.reji {
font-size: 18px;
color: #c20d23;
font-weight: bold;
font-weight: 700;
text-align: center;
line-height: 1.8;
padding: 10px;
}
.sticker {
width: 92%;
margin: 0 auto;
padding: 30px 0;
text-align: center;
}
.hosoku {
font-size: 13px;
color: #000;
line-height: 1.8;
}
.link-last {
padding: 20px 0;
text-align: center;
font-size: 13px;
font-weight: bold;
font-weight: 700;
}


.btn_sd {
padding: 20px 0 ;
}
.btn_sd a {
text-decoration: underline;
color: #3081C3;
}





/* モーダルウィンドウ */
/* スマホ向けボタン位置調整 */
.modaal-close {
	position:absolute;
	right: 17px;
	top: 18px;
	color: #fff;
	cursor: pointer;
	opacity: 1;
	width: 22px;
	height: 22px;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

/**/
#modal {
display: none;
}
.box_modal {
	text-align: left;
}
.box_modal .h_modal {
	font-size: 18px;
	font-weight: 700;
	background-color: #fff000;
	padding: 15px 30px 15px 15px;
}
.box_modal .clearfix {
	padding: 15px 20px;
}
.box_modal .txt_modal {
	margin-bottom:20px;
}
.box_modal .ph_modal {
}
.box_modal .note_modal {
}
.box_modal .note_modal a {
	text-decoration: underline;
	display:inline-block;
}
/* モーダル調整 */
.box_modal .clearfix {
}
.box_modal .txt_modal {
}
.box_modal .ph_modal {
}
.box_modal .note_modal {
	clear: both;
	padding-top: 20px;
}

.mv_box{
  position:relative;
  width:100%;
  padding-top:56.25%;
  margin-bottom: 10px;
}
.mv_box iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
.cmp_end {
position: relative;
}
.cmp_end .end_txt {
position: absolute;
  top: 55%;
  left: 50%;
  transform: translateY(-55%) translateX(-50%);
  -webkit- transform: translateY(-55%) translateX(-50%);
  margin: auto;
  background: #DB2023;
  width: 100%;
  opacity: 0.9;
}
.cmp_end .end_txt p {
padding: 50px 0;
text-align: center;
font-size: 18px;
font-weight: bold;
font-weight: 700;
  color: #fff;
}


}


/* 769px以上 PC向け
--------------------------------------------------------------------------------- */
@media print, screen and (min-width: 769px) {
body {
	min-width: 1000px;
}
.part_sp {
	display: none!Important;
}
a {
	transition: .5s;
}
a:hover {
	opacity: 0.7;
}
#wrapper {
}
h1 {
display: none;
font-size: 0;
}
/*-----------------------------------------------------
contents
-------------------------------------------------------*/
.contents {
	width: 1000px;
	margin: 0 auto;
	background-image: url(http://www.yellowhat.jp/campaign/202002/img/bg.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	padding: 50px 0;
}



#main-v {
position: relative;
min-height: 512px;
}
#main-v #vis {
margin: 0 auto;
text-align: center;
background-color: #fff462;
}
#main-v #vis img {
width: 100%;
min-width: 1000px;
}
#main-v ul.subnav {
position: absolute;
top: 100px;
left: 0;
}
#main-v ul.subnav li {
margin-bottom: 10px;
}
#main-v ul.subnav li img {
height: 60px;
}

#statement,#last-year {
background-color: #006934;
}

h2 {
font-size: 38px;
color: #006934;
text-align: center;
line-height: 1.5;
padding-bottom: 50px;
}
.st-txt {
font-size: 21px;
color: #006934;
text-align: center;
line-height: 2.2;
font-weight: bold;
font-weight: 700;
}
.catch {
font-size: 24px;
color: #006934;
text-align: center;
line-height: 2;
font-weight: bold;
font-weight: 700;
}
.lead {
font-size: 18px;
color: #000;
text-align: center;
padding: 30px 0;
line-height: 2;
font-weight: bold;
font-weight: 700;
}


h3 {
text-align: center;
font-size: 40px;
color: #fff;
padding: 20px 0;
background-color: #006934;
line-height: 1.1;
width: 88%;
margin: 0 auto;
}
h3 span {
font-size: 24px;
}
h3 {
  background-image: 
    url(http://www.yellowhat.jp/campaign/202002/img/ft.svg),
    url(http://www.yellowhat.jp/campaign/202002/img/ft2.svg);

  background-position:
    left 30px center,
    right 30px center;

  background-repeat:
    no-repeat,
    no-repeat;

  background-size:
    50px 50px;
}
h4 {
font-size: 24px;
line-height: 1.5;
}


.cap1 {
font-size: 13px;
color: #222;
line-height: 1.5;
text-align: left;
padding: 10px 0;
}
.neko_cap {
font-size: 15px;
color: #222;
line-height: 1.5;
text-align: left;
padding: 10px 0;
font-weight: bold;
font-weight: 700;
}
.cap2 {
font-size: 13px;
color: #222;
line-height: 1.5;
text-align: right;
padding: 10px 0;
}
.cap3 {
font-size: 13px;
color: #222;
line-height: 1.5;
text-align: center;
padding: 10px 0;
}


.tb-box1 {
width: 820px;
margin: 0 auto;
display: table;
border-collapse: separate;
border-spacing: 20px 0;
}
.tb-box1 .img-box {
width: 340px;
display: table-cell;
vertical-align: top;
}
.tb-box1 .img-box img {
width: 100%;
}
.tb-box1 .txt-box {
display: table-cell;
vertical-align: top;
}

.tb-box1 .txt-box ul li {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.tb-box1 .txt-box ul li img {
width: 180px;
}
.tb-box1 .txt-box .img-howto {
width: 100%;
margin: 20px auto;
}
.tb-box1 .txt-box .img-howto img {
width: 380px;
}
.tb-box1 .howto {
font-size: 22px;
line-height: 1.8;
font-weight: bold;
font-weight: 700;
padding: 20px 0 0;
clear: both;
}


.tb-box2 {
width: 820px;
margin: 0 auto;
display: table;
border-collapse: separate;
border-spacing: 20px 0;
}
.tb-box2 .img-box {
width: 340px;
display: table-cell;
vertical-align: top;
}
.tb-box2 .img-box img {
width: 100%;
}
.tb-box2 .txt-box {
display: table-cell;
vertical-align: top;
}
.tb-box2 .txt-box .point1,
.tb-box2 .txt-box .point2{
font-size: 24px;
color: #000;
font-weight: bold;
font-weight: 700;
line-height: 1;
padding-bottom: 10px;
}
.tb-box2 .txt-box .point1:before {
  content: '';
  display: inline-block;
  width: 51px;
  height: 56px;
  background-image: url(http://www.yellowhat.jp/campaign/202002/img/icon_point1.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
}
.tb-box2 .txt-box .point2:before {
  content: '';
  display: inline-block;
  width: 51px;
  height: 56px;
  background-image: url(http://www.yellowhat.jp/campaign/202002/img/icon_point2.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
}
.tb-box2 .txt-box .point-honbun {
font-size: 14px;
color: #222;
line-height: 2;
padding-bottom: 20px;
}
.tb-box3 {
width: 820px;
margin: 0 auto;
display: table;
border-collapse: separate;
border-spacing: 20px 0;
}
.tb-box3 .img-box {
width: 340px;
display: table-cell;
vertical-align: top;
}
.tb-box3 .img-box img {
width: 100%;
}
.tb-box3 .txt-box {
display: table-cell;
vertical-align: top;
}
.tb-box3 .txt-box .pre-honbun {
font-size: 18px;
font-weight: bold;
font-weight: 700;
color: #222;
line-height: 1.8;
}

.tb-box3 .txt-box .pre-honbun span {
background:linear-gradient(transparent 60%, #FFFF00 0%);
}

.kakomi1 {
width: 794px;
margin: 30px auto;
border:3px solid #006934;
border-radius: 10px;
background-color: #fff000;
padding: 20px;
}
.kakomi1 h5 {
font-size: 30px;
color: #006934;
padding-bottom: 10px;
border-bottom: 3px solid #006934;
margin-bottom: 10px;
text-align: center;
font-weight: bold;
font-weight: 700;
}
.kakomi1 .kakomi-txt {
font-size: 18px;
color: #000;
line-height: 2;
text-align: center;
font-weight: bold;
font-weight: 700;
}
.kakomi1 .netprint {
width: 100%;
margin: 0 auto;
padding: 30px 0 0;
text-align: center;
}
.kakomi1 .netprint .print-num {
font-size: 18px;
color: #000;
font-weight: bold;
font-weight: 700;
line-height: 2;
}
.dwl-pdf {
padding: 20px 0 0;
text-align: center;
font-size: 18px;
font-weight: bold;
font-weight: 700;
}
.w800 {
width: 800px;
margin: 0 auto;
}

.kakomi2 {
width: 794px;
margin: 30px auto;
border:3px solid #006934;
border-radius: 10px;
background-color: #fff;
padding: 30px;
}
.kakomi2 h5 {
font-size: 18px;
color: #006934;
padding-bottom: 10px;
border-bottom: 3px solid #006934;
margin-bottom: 30px;
text-align: left;
}
.kakomi2 .kakomi-txt2 {
font-size: 14px;
color: #222;
line-height: 1.8;
}
.kakomi2 .img-camp {
float: right;
}
.kakomi2 .img-camp img {
width: 320px;
margin-left: 20px;
}

.kakomi3 {
width: 800px;
margin: 30px auto;
border-radius: 10px;
background-color: #006934;
padding: 40px;
position: relative;
}
.kakomi3 h5 {
font-size: 24px;
color: #fff;
padding-bottom: 10px;
border-bottom: 1px solid #fff;
margin-bottom: 10px;
text-align: left;
line-height: 1.5;
}
.kakomi3 h5 span {
color: #fff000;
}
.kakomi3 .kakomi-txt3 {
font-size: 15px;
color: #fff;
line-height: 3;
padding: 20px 0 0;
}
.kakomi3 .nyan-icon {
position: absolute;
right: -40px;
bottom: 10px;
}
.kakomi3 .nyan-icon img {
width: 244px;
}
.kakomi4 {
width: 794px;
margin: 30px auto;
border:3px solid #006934;
border-radius: 10px;
background-color: #fff;
padding: 40px 40px 10px;
}
.kakomi4 h5 {
font-size: 24px;
color: #006934;
padding-bottom: 10px;
border-bottom: 3px solid #006934;
margin-bottom: 20px;
text-align: left;
}
.kakomi4 h5 span {
color: #fff000;
background-color: #006934;
padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
}




.date {
font-size: 36px;
color: #fff;
text-align: center;
padding: 10px;
font-weight: bold;
font-weight: 700;
}
.date span {
font-size: 24px;
}
.date-block {
width: 440px;
margin: 50px auto;
background-color: #006934;
}
.boshu-honbun {
font-size: 24px;
color: #006934;
font-weight: bold;
font-weight: 700;
text-align: center;
line-height: 1.8;
}
.reji {
font-size: 20px;
color: #c20d23;
font-weight: bold;
font-weight: 700;
text-align: center;
line-height: 1.8;
}
.sticker {
width: 790px;
margin: 0 auto;
padding: 50px 0;
text-align: center;
}
.sticker img {
width: 100%;
}
.hosoku {
font-size: 18px;
color: #000;
line-height: 1.8;
}
.link-last {
padding: 20px 0;
text-align: center;
font-size: 18px;
font-weight: bold;
font-weight: 700;
}


.btn_sd {
padding: 20px 0 0;
}
.btn_sd a {
text-decoration: underline;
color: #3081C3;
}


/* モーダルウィンドウ */
#modal {
display: none;
}
.box_modal {
	text-align: left;
}
.box_modal .h_modal {
	font-size: 24px;
	font-weight: 700;
	background-color: #fff000;
	padding: 10px 0 10px 15px;
}
.box_modal .clearfix {
	padding: 20px 25px;
}
.box_modal .txt_modal {
	float: left;
}
.box_modal .ph_modal {
	float: right;
}
.box_modal .ph_modal img {
	width: 100%;
	height: auto;
}
.box_modal .note_modal {
}
.box_modal .note_modal a {
	text-decoration: underline;
}
.box_modal .note_modal a:hover {
	text-decoration: none;
	opacity: 1;
}
/* モーダル調整 */

.box_modal .clearfix {
	padding: 20px 20px 20px 25px;
}
.box_modal .txt_modal {
	width: 500px;
}
.box_modal .ph_modal {
	width: 306px;
}
.box_modal .note_modal {
	clear: both;
	padding-top: 30px;
}
.mv_box{
width: 100%;
margin: 0px auto 10px;
text-align: center;
}

.cmp_end {
position: relative;
}
.cmp_end .end_txt {
position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
  background: #DB2023;
  width: 100%;
  opacity: 0.95;
}
.cmp_end .end_txt p {
padding: 50px 0;
text-align: center;
font-size: 44px;
font-weight: bold;
font-weight: 700;
  color: #fff;
}


}