@charset "UTF-8";

html[data-browse-mode="P"] .sp { display: none !important;}
html[data-browse-mode="S"] .pc { display: none !important;}
#iron { color: #443829;}

/* PC
----------------------------*/
@media only screen and (min-width: 897px) {
  .event-bottom-banners ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
  .event-bottom-banners ul li { width: 49%; margin: 0 0 20px;}
	.special-intro.color-green .special-anchor-links .child { border-color: #7baa17; color: #fff; background: #7baa17 url(../../common/img/ar_down_white.png) no-repeat 95%;}
	
	#iron strong { font-weight: bold;}
	#iron .ttl   { margin: 0 0 30px 0; text-align: center;}
	#iron .sub   { margin: 0 0 30px 0; text-align: center;}
	#iron .text  { font-size: 20px; color: #443829;}
	#iron .color { color: #ba1f21;}
	#iron .green-frame { padding: 0 27px 27px 27px; margin: 20px 0; border: #7baa17 3px solid; border-radius: 10px; color: #443829; background: #fff;}
	#iron .green-frame h2.green-title { margin: 0 -27px 30px; border-radius: 0; background: #7baa17; color: #fff; font-size: 30px; font-weight: bold;}
	#iron #iron_about .about-check-box { padding: 30px 37px 20px; margin: 0; border: #7baa17 3px solid; border-radius: 10px; background: url("../img/grid_bg.gif") repeat; text-align: center;}
	#iron #iron_about .about-check-list { display: flex; justify-content: space-between;}
	#iron #iron_about .about-check-list li { padding: 0 0 0 30px; background: url("../img/about_check.png") left top no-repeat; font-size: 20px; font-weight: bold; text-align: center; line-height: 1.8;}
	#iron #iron_reason img  { position: relative; bottom: -50px;}
	#iron .iron-green-frame { padding: 60px 40px 40px; margin: 0 0 30px 0; border-radius: 10px; background: #f1f6e8;}
	#iron #iron_flow        { position: relative;}
	#iron #iron_flow .about-flow-box  { padding: 20px; margin: 0 0 20px 0; border: #7baa17 5px solid; border-radius: 10px; overflow: hidden; background: #fff;}
	#iron #iron_flow .about-flow-list { display: flex; justify-content: space-between;}
	#iron #iron_flow .about-flow-list li { width: calc(25% - 20px);}
	#iron #iron_flow .about-flow-list .image { margin: 0 0 10px 0; text-align: center; position: relative;}	
	#iron #iron_flow .about-flow-list .image::after { content: ''; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 16px solid #7baa17; display: block; position: absolute; right: -18px; top: calc(50% - 13px);}	
	#iron #iron_flow .about-flow-list li:last-child .image::after { display: none;}	
	#iron #iron_flow .about-flow-list .number img { width: 50px; margin: 0 0 10px 0; text-align: left;}
	#iron #iron_flow .about-flow-list .title { margin: 0 0 10px 0; font-size: 22px; font-weight: bold; text-align: left; line-height: 1.4; color: #07913a;}
	#iron #iron_flow .about-flow-list .text { line-height: 1.4;}	
	#iron #iron_flow .green-frame { padding: 37px 27px 27px 27px;}
	#iron #iron_effect .text  { margin: 0 0 30px 0; font-size: 20px; font-weight: bold; text-align: center; letter-spacing: 0.1em;}
	#iron #iron_effect .color { font-size: 20px; font-weight: bold; color: #ba1f21;}
	#iron #iron_effect .effect-list    { display: flex; justify-content: space-between;}
	#iron #iron_effect .effect-list li { width: 48%;}
	#iron #iron_effect .effect-list .image { margin-bottom: 15px;}
	#iron #iron_effect .effect-list dl { display: flex;}
	#iron #iron_effect .effect-list dt::after { content: '：';}
	#iron #iron_effect .indent-list    { margin: 20px 0 0 0;}
	#iron #iron_effect .indent-list li { padding-left: 1em; font-size: 14px; text-indent: -1em;}
	#iron #iron_mechanism .kome-text   { padding-left: 1em; font-size: 14px; text-indent: -1em; position: relative; bottom: -10px;}
	#iron #iron_mechanism .mechanism-list { margin-bottom: 30px; display: flex; justify-content: space-between; flex-wrap: wrap;}
	#iron #iron_mechanism .mechanism-list li { width: 48%;}
	#iron #iron_mechanism .mechanism-list .image { margin: 0 0 15px 0; text-align: center;}
	#iron #iron_mechanism .mechanism-list .text  { padding-left: 70px;}
	#iron #iron_mechanism .mechanism01 .text { 
		background: url("../img/num01.png") left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px;}
	#iron #iron_mechanism .mechanism02 .text { 
		background: url("../img/num02.png") left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px;}
	#iron #iron_mechanism .mechanism03 .text { 
		background: url("../img/num03.png") left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px;}
	#iron #iron_mechanism .mechanism04 .text { 
		background: url("../img/num04.png") left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px;}
	#iron #iron_feature { margin: 80px 0 60px 0;}
	#iron #iron_feature #frame_02  { padding-bottom: 20px; background: #f1f6e8 url("../img/company_bg.png") center 415px repeat-x;}
	#iron #iron_feature .image     { text-align: center;}
	#iron #iron_feature .image img { width: 479px;}
	#iron #iron_feature .text.line01 { margin-bottom: 20px;}
	#iron #iron_feature .text.line02 { margin-bottom: 30px;}
	#iron #iron_feature ul { margin: 0 0 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
	#iron #iron_feature li { width: 45%; text-align: center; position: relative;}
	#iron #iron_feature li.before::after { content: ''; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 26px solid #7baa17; display: block; position: absolute; right: -53px; top: calc(50% - 20px);}	
	#iron #iron_nav ul { display: flex; justify-content: space-between;}
	#iron #iron_nav li { width: 32%; padding: 0; margin: 0; border: #7baa17 3px solid; border-radius: 10px; color: #443829; background: #fff;}
	#iron #iron_nav li a { padding: 0 0 30px 0; display: block; position: relative; text-decoration: none;}
	#iron #iron_nav li a::after { content: ''; border-top: 16px solid #7baa17; border-bottom: 16px solid transparent; border-left: 14px solid transparent; border-right: 14px solid transparent; display: block; position: absolute; left: calc(50% - 16px); bottom: 0;}
	#iron #iron_nav li .line01 { padding: 10px 0; font-size: 20px; font-weight: bold; text-align: center; color: #fff; background: #7baa17;}
	#iron #iron_nav li .line02 { margin: 0 -3px 15px -3px; font-size: 24px; font-weight: bold; text-align: center; color: #fff; background: #c4181f; position: relative; z-index: 1;}
	#iron #iron_nav li .image { padding: 0 15px; margin: 0 0 10px 0;}
	
	/* 関連イベント */
	h2.green-title { border-radius: 10px; background: #7baa17; color: #fff; font-size: 30px; font-weight: bold;}
	h2.green-title .red-box { padding: 2px 20px; margin-left: 15px; border-radius: 10px; color: #fff; background: #c4181f; display: inline-block;}
	.green-box { padding: 0 35px 40px; margin: 70px 0 40px 0; border: #7baa17 5px solid; border-radius: 10px; color: #443829;}
	.green-box h2.green-title { margin: 0 -35px 40px; border-radius: 0;}
	.green-box .head-box { padding: 0 20px; margin: 0 0 20px 0; display: flex; justify-content: space-between; align-items: center;}
	.green-box .checkpoint-box .mark-ttl { padding: 0 0 0 34px; font-size: 24px; font-weight: bold; position: relative;}
	.green-box .checkpoint-box .mark-ttl::before { content: '●'; color: #7baa17; position: absolute; top: 0; left: 0;}
	.green-box .checkpoint-box .text { font-size: 18px;}
	.green-box .osusume-box    { padding: 30px 40px; margin-top: 40px; border-radius: 10px; background: #f1f6e8;}
	.green-box .osusume-box h3 { margin: 0 0 20px 0; text-align: center;}
	.green-box .osusume-box h3::after { display: none !important;}
	.green-box .osusume-box ul li { padding: 0 0 0 25px; margin: 5px 0 0 0; font-size: 20px; font-weight: bold; position: relative;}
	.green-box .osusume-box ul li::before { content: ''; width: 16px; height: 2px; background: #7baa17; position: absolute; top: calc(1em - 4px); left: 0;}
	.green-box .detail-box { margin-top: 40px;}
	.green-box .detail-box .kome-text { font-size: 18px;}
	.green-box .detail-box dl { font-size: 18px;}
	.green-box .detail-box dt { font-size: 18px; font-weight: bold;}
	.green-box .detail-box dd { font-size: 18px;}
	.green-box .table-box { margin-top: 40px;}
	.green-box .table-box table { width: 100%; border-collapse: collapse; text-align: center;}
	.green-box .table-box table .c1,
	.green-box .table-box table .c2,
	.green-box .table-box table .c3 { min-width: calc(100% / 3); max-width: calc(100% / 3); width: calc(100% / 3);}
	.green-box .table-box table th  { padding: 8px; font-size: 18px; font-weight: bold; text-align: center; background: #efede6;}
	.green-box .table-box table th.green { background: #7baa17; color: #fff;}
	.green-box .table-box table td  { padding: 8px; border: none; border-top: #cbc9c4 1px solid; border-bottom: #cbc9c4 1px solid;  font-size: 18px; text-align: center;}
	.green-box .table-box .kome-text { margin: 10px 0 0 0; font-size: 14px; text-align: right;}
	#iron_company { padding: 65px 0 60px; margin: 100px 0 0 0; border-radius: 10px; background: #f1f6e8 url("../img/company_bg.png") center 350px repeat-x; text-align: center; color: #443829;}
	#iron_company .image{ text-align: center;}
	#iron_company .image img { width: 594px;}
	#iron_company .ttl1 { margin: 0 0 55px 0;}
	#iron_company .text { font-size: 20px; font-weight: bold; text-align: center; color: #443829;}
	#iron04 { margin-top: 70px; color: #443829;}
	#iron04 .head-top-image { text-align: center;}
	#iron05 { margin-top: 70px; color: #443829;}
	
  /* add */
	#iron #iron_mechanism { padding-bottom: 0;}
	#iron #iron_mechanism h2.green-title { margin-bottom: 0; position: relative;}
	#iron #iron_mechanism h2.green-title::before { content: ''; width: 24px; height: 3px; background: #fff; position: absolute; right: 30px; top: calc(50% - 2px);}
	#iron #iron_mechanism h2.green-title::after { content: ''; width: 24px; height: 3px; background: #fff; position: absolute; right: 30px; top: calc(50% - 2px); transform: rotate(-90deg); transition: 0.3s;}
	#iron #iron_mechanism.active { padding-bottom: 27px;}
	#iron #iron_mechanism.active h2.green-title { margin-bottom: 30px;}
	#iron #iron_mechanism.active h2.green-title::after { transform: rotate(0deg);}
	#iron #iron_mechanism_inner { display: none;}
	
	.green-box .block-top-event--goods { margin-top: 35px;}
	.green-box .block-goods-list-d--item-body { width: 820px;}
	.green-box .block-goods-list-d--item-description { width: 596px;}
	.green-box .block-goods-list-d--item-details-left { flex-basis: 120px;}
}

/* SP
----------------------------*/
@media only screen and (max-width: 896px) {
  .event-bottom-banners { margin: 4vw; }
  .event-bottom-banners ul li:not(:last-child) { margin: 0 0 10px;}
	.special-intro.color-green .special-anchor-links .child { border-color: #7baa17; color: #fff; background: #7baa17 url(../../common/img/ar_down_white.png) no-repeat 95%;}
	
	#iron strong { font-weight: bold;}
	.iron-wrap { padding: 0 10px;}
	#iron .ttl   { margin: 0 0 20px 0; text-align: center;}
	#iron .sub   { margin: 0 0 15px 0; text-align: center;}
	#iron .text  { font-size: 18px; color: #443829;}
	#iron .color { color: #ba1f21;}
	#iron .green-frame { padding: 0 15px 15px 15px; margin: 20px 0; border: #7baa17 3px solid; border-radius: 10px; color: #443829; background: #fff;}
	#iron .green-frame h2.green-title { margin: 0 -15px 15px; border-radius: 0; background: #7baa17; color: #fff; font-size: 20px; font-weight: bold;}
	#iron #iron_about .sub img { width: 210px; vertical-align: top;}
	#iron #iron_about .about-check-box { padding: 20px 15px 10px; margin: 0; border: #7baa17 3px solid; border-radius: 10px; background: url("../img/grid_bg.gif") repeat; text-align: center;}
	#iron #iron_about .about-check-list { margin: 0 auto; display: inline-block;}
	#iron #iron_about .about-check-list li { padding: 0 0 0 28px; margin: 0 0 5px 0; background: url("../img/about_check.png") left top no-repeat; -webkit-background-size: 20px auto; background-size: 20px auto; font-size: 18px; font-weight: bold; line-height: 1.8; text-align: left;}
	#iron #iron_reason { width: 90%; margin: 0 auto 20px;}
	#iron #iron_reason img  { position: relative; bottom: -30px;}
	#iron .iron-green-frame { padding: 30px 15px 1px; margin: 0 0 30px 0; border-radius: 10px; background: #f1f6e8;}
	#iron #iron_flow        { position: relative;}
	#iron #iron_flow .sub   { width: 60%; margin: 0 auto 15px;}
	#iron #iron_flow .green-frame { padding: 15px;}
	#iron #iron_flow .about-flow-box  { padding: 15px; margin: 0 0 20px 0; border: #7baa17 5px solid; border-radius: 10px; overflow: hidden; background: #fff;}
	#iron #iron_flow .about-flow-list li { margin: 0 0 50px 0; position: relative;}
	#iron #iron_flow .about-flow-list li::after { content: ''; border-top: 30px solid #7baa17; border-left: 40px solid transparent; border-right: 40px solid transparent; display: block; position: absolute; left: calc(50% - 40px); bottom: -40px;}
	#iron #iron_flow .about-flow-list li:last-child { margin-bottom: 0;}	
	#iron #iron_flow .about-flow-list li:last-child::after { display: none;}	
	#iron #iron_flow .about-flow-list .image { padding: 0 15%; margin: 0 0 10px 0; text-align: center; position: relative;}	
	#iron #iron_flow .about-flow-list .number img { width: 50px; margin: 0 0 10px 0; text-align: left;}
	#iron #iron_flow .about-flow-list .title { margin: 0; font-size: 20px; font-weight: bold; text-align: left; line-height: 1.4; color: #07913a;}
	#iron #iron_flow .about-flow-list .text { line-height: 1.4;}	
	#iron #iron_effect .text  { margin: 0 0 15px 0; font-size: 18px; font-weight: bold;}
	#iron #iron_effect .color { font-size: 18px; font-weight: bold; color: #ba1f21;}
	#iron #iron_effect .effect-list li { margin: 0 0 20px 0;}
	#iron #iron_effect .effect-list .image { margin-bottom: 15px;}
	#iron #iron_effect .effect-list dl { display: flex;}
	#iron #iron_effect .effect-list dt::after { content: '：';}
	#iron #iron_effect .indent-list    { margin: 20px 0 0 0;}
	#iron #iron_effect .indent-list li { padding-left: 1em; font-size: 14px; text-indent: -1em;}
	#iron #iron_mechanism .kome-text   { padding-left: 1em; font-size: 14px; text-indent: -1em; position: relative; bottom: -10px;}
	#iron #iron_mechanism .mechanism-list { margin-bottom: 20px;}
	#iron #iron_mechanism .mechanism-list li { margin: 0;}
	#iron #iron_mechanism .mechanism-list .image { margin: 0 0 15px 0; text-align: center;}
	#iron #iron_mechanism .mechanism-list .text  { padding-left: 70px;}
	#iron #iron_mechanism .mechanism01 .text { 
		background: url("../img/num01.png") left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px;}
	#iron #iron_mechanism .mechanism02 .text { 
		background: url("../img/num02.png") left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px;}
	#iron #iron_mechanism .mechanism03 .text { 
		background: url("../img/num03.png") left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px;}
	#iron #iron_mechanism .mechanism04 .text { 
		background: url("../img/num04.png") left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px;}
	#iron #iron_feature { margin: 80px 0 60px 0;}
	#iron #iron_feature .ttl { width: 80%; margin: 0 auto 15px;}
	#iron #iron_feature #frame_02  { padding-bottom: 1px; background: #f1f6e8 url("../img/company_bg.png") center 20% repeat-x;}
	#iron #iron_feature .image { padding: 0 10px; text-align: center;}
	#iron #iron_feature .text.line01 { margin-bottom: 20px;}
	#iron #iron_feature .text.line02 { margin-bottom: 30px;}
	#iron #iron_feature li { margin: 0 0 30px 0; text-align: center; position: relative;}
	#iron #iron_feature li.before::after { content: ''; border-top: 14px solid #7baa17; border-left: 20px solid transparent; border-right: 20px solid transparent; display: block; position: absolute; left: calc(50% - 20px); bottom: -23px;}	
	#iron #iron_nav .ttl img { width: 200px;}
	#iron #iron_nav ul { display: flex; flex-wrap: wrap; justify-content: center;}
	#iron #iron_nav li { width: 46%; padding: 0; margin: 0 2% 20px; border: #7baa17 3px solid; border-radius: 10px; color: #443829; background: #fff;}
	#iron #iron_nav li a { height: 100%; padding: 0 0 30px 0; display: block; position: relative; text-decoration: none;}
	#iron #iron_nav li a::after { content: ''; border-top: 16px solid #7baa17; border-bottom: 16px solid transparent; border-left: 12px solid transparent; border-right: 12px solid transparent; display: block; position: absolute; left: calc(50% - 12px); bottom: -5px;}
	#iron #iron_nav li .line01 { padding: 4px 0; font-size: 16px; font-weight: bold; text-align: center; color: #fff; background: #7baa17;}
	#iron #iron_nav li .line02 { margin: 0 -3px 15px -3px; font-size: 18px; font-weight: bold; text-align: center; color: #fff; background: #c4181f; position: relative; z-index: 1;}
	#iron #iron_nav li .image { margin: 0 0 10px 0;}
	
	/* 関連イベント */
	h2.green-title { border-radius: 0; font-size: 20px; font-weight: bold; background: #7baa17; color: #fff;}
	h2.green-title .red-box { padding: 2px 15px; margin: 0 10px; border-radius: 10px; color: #fff; background: #c4181f; display: inline-block;}
	.green-box { padding: 0 15px 30px; margin: 40px 15px 20px 15px; border: #7baa17 5px solid; border-radius: 10px; color: #443829;}
	.green-box h2.green-title { padding-bottom: calc(1.33vw + 5px); margin: 0 -15px 40px; border-radius: 0;}
	.green-box .head-box { max-width: 75%; padding: 0; margin: 0 auto 20px; text-align: center;}
	.green-box .head-box .image01 { margin: 0 auto 20px; text-align: center;}
	.green-box .checkpoint-box .mark-ttl { padding: 0 0 0 24px; font-size: 16px; font-weight: bold; position: relative;}
	.green-box .checkpoint-box .mark-ttl::before { content: '●'; color: #7baa17; position: absolute; top: 0; left: 0;}
	.green-box .checkpoint-box .text { font-size: 16px;}
	.green-box .osusume-box    { padding: 15px 15px 20px 15px; margin-top: 20px; border-radius: 10px; background: #f1f6e8;}
	.green-box .osusume-box h3 { margin: 0 0 10px 0; text-align: center;}
	.green-box .osusume-box h3 img { width: 140px; vertical-align: middle;}
	.green-box .osusume-box h3::after { display: none !important;}
	.green-box .osusume-box ul li { padding: 0 0 0 18px; margin: 5px 0 0 0; font-size: 16px; font-weight: bold; position: relative;}
	.green-box .osusume-box ul li::before { content: ''; width: 10px; height: 2px; background: #7baa17; position: absolute; top: calc(1em - 4px); left: 0;}
	.green-box .detail-box { margin-top: 20px;}
	.green-box .detail-box .kome-text { font-size: 14px;}
	.green-box .detail-box dl { font-size: 16px;}
	.green-box .detail-box dt { font-size: 16px; font-weight: bold; word-break: keep-all;}
	.green-box .detail-box dd { font-size: 16px;}
	.green-box .table-box { margin-top: 20px;}
	.green-box .table-box table { width: 100%; border-collapse: collapse; text-align: center;}
	.green-box .table-box table .c1,
	.green-box .table-box table .c2,
	.green-box .table-box table .c3 { min-width: calc(100% / 3); max-width: calc(100% / 3); width: calc(100% / 3);}
	.green-box .table-box table th  { padding: 5px 0; font-size: 16px; font-weight: bold; text-align: center; background: #efede6;}
	.green-box .table-box table th.green { background: #7baa17; color: #fff;}
	.green-box .table-box table td  { padding: 5px 0; border: none; border-top: #cbc9c4 1px solid; border-bottom: #cbc9c4 1px solid;  font-size: 14px; text-align: center;}
	.green-box .table-box .kome-text { margin: 10px 0 0 0; font-size: 14px; text-align: right;}
	#iron_company { padding: 35px 0 30px; margin: 40px 15px 0 15px; border-radius: 10px; background: #f1f6e8 url("../img/company_bg.png") center 90% repeat-x; text-align: center; color: #443829;}
	#iron_company .ttl1  { margin: 0 0 15px 0;}
	#iron_company .image { padding: 0 10%;}
	#iron_company .text  { font-size: 18px; font-weight: bold; text-align: center; color: #443829;}
	#iron04 { margin-top: 40px; color: #443829;}
	#iron04 h2.green-title  { margin-top: 20px;}
	#iron04 .head-top-image { text-align: center;}
	#iron05 { margin-top: 40px; color: #443829;}
	
  /* add */
	#iron #iron_mechanism { padding-bottom: 0;}
	#iron #iron_mechanism h2.green-title { margin-bottom: 0; position: relative;}
	#iron #iron_mechanism h2.green-title::before { content: ''; width: 18px; height: 3px; background: #fff; position: absolute; right: 15px; top: calc(50% - 2px); transition: 0.3s;}
	#iron #iron_mechanism h2.green-title::after  { content: ''; width: 18px; height: 3px; background: #fff; position: absolute; right: 15px; top: calc(50% - 2px); transform: rotate(-90deg); transition: 0.3s;}
	#iron #iron_mechanism.active { padding-bottom: 15px;}
	#iron #iron_mechanism.active h2.green-title { margin-bottom: 15px;}
	#iron #iron_mechanism.active h2.green-title::after { transform: rotate(0deg);}
	#iron #iron_mechanism_inner { display: none;}
}