@charset "UTF-8";


/* コンパン社「グリーンライン」シリーズ 特集 */


/* ■ 共通 --------------------------------------------------- */

#Page_KompanGreenline {
padding-bottom: 115px;
overflow: hidden;
}

#Page_KompanGreenline .SP {
display: none;
}

#Page_KompanGreenline p {
font-size: 15px;
line-height: 2.2em;
}

#Page_KompanGreenline #TopicPath {
width: 940px;
margin: 0 auto;	
}

#Page_KompanGreenline .WireList, 
#Page_KompanGreenline .PhotoList {
display: flex;
}

#Page_KompanGreenline #KeyVisual img,
#Page_KompanGreenline .Photo img,
#Page_KompanGreenline .PhotoList img {
width: 100%;
height: auto;
}

#Page_KompanGreenline .SectionMovie {
width: 940px;
margin: 0 auto;
}

#Page_KompanGreenline .SectionMovie {
width: 940px;
margin: 0 auto;
padding: 50px;
box-sizing: border-box;
background: #effaff;
}

#Page_KompanGreenline .LeadTitle {
width: 820px;
margin: 0 auto 85px auto;
font-size: 18px;
font-weight: bold;
line-height: 2.0em;	
}

/* フォント */
#Page_KompanGreenline .WF1 {
font-family: 'Nunito Sans', sans-serif;
}

/* 横幅 */
#Page_KompanGreenline .Width2 {
width: 940px;
margin: 0 auto;	
}

/* ボーダー */
#Page_KompanGreenline .LineBox img {
border: 1px solid #d1d1d1;
}

/* セクション */
#Page_KompanGreenline .SectionMain {
width: 940px;
margin: 0 auto;	
}

#Page_KompanGreenline .SectionSub {
position: relative;
padding: 65px 60px 60px 60px;
box-sizing: border-box;
background: #effaff;
}

/* 見出し */	
#Page_KompanGreenline .SectionMain h2.MdsH2 {
padding: 25px 0;
border-radius: 15px;
box-sizing: border-box;
border: 5px solid;
font-size: 25px !important;
color: #2c7e81;
text-align: center;
line-height: 1.0em;
}

#Page_KompanGreenline .SectionSub h3.MdsH3 {
position: absolute;
top: 0;
left: 50%;
width: 260px;
height: 50px;
margin-top: -26px;
margin-left: -130px;
border-radius: 8px;
box-sizing: border-box;
background: #d00019;
font-size: 22px !important;
text-align: center;
line-height: 50px;
color: #fff;
}

/* カラム */
#Page_KompanGreenline .Col2_PC {	
width: 100%;
}

#Page_KompanGreenline .Col2_PC > li {	
width: 48%;
margin-right: 4%;
}

#Page_KompanGreenline .Col2_PC > li:nth-child(2n) {	
margin-right: 0;
}


#Page_KompanGreenline .Col3_PC > li {	
width: 30%;
margin-right: 5%;
}

#Page_KompanGreenline .Col3_PC > li:nth-child(3n) {	
margin-right: 0;
}

/* ボタン */
#Page_KompanGreenline .Btn {
display: block;
width: 100%;
border-radius: 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
font-size: 15px;
line-height: 1.0em;
font-weight: bold;
text-align: center;
text-decoration: none;
}

#Page_KompanGreenline .Btn1 {
width: 65%;
margin: 0 auto;
padding: 25px 0;
border-radius: 10px;
background: #8ab627 url(/images/sp/common/icon/Icon_LinkFwd_White.png) no-repeat;
background-size: 25px auto;
background-position: 96% 50%;
font-size: 20px;
color: #fff;
}

#Page_KompanGreenline .BtnWrap {
width: 70%;
margin: 60px auto 0 auto;
}

#Page_KompanGreenline .BtnListWrap {
width: 70%;
margin: 75px auto 0 auto;
text-align: center;
}

#Page_KompanGreenline .ListBtn li {
margin-bottom: 20px;	
}

#Page_KompanGreenline .ListBtn li:last-child {
margin-bottom: 0;	
}

/* リスト各種 */
.ListDisc li,
.ListDiscS li,
.ListKome li,
.ListKomeS li,
.ListNumS li,
.ListKomeNumS li {
position: relative;
padding-left: 22px;
background-image: none;
color: #000;
}

.ListDisc li:before,
.ListDiscS li:before,
.ListKome li:before,
.ListKomeS li:before,
.ListNumS li:before,
.ListKomeNumS li:before {
display: inline-block;
position: absolute;
}

/* ディスク（ListDisc） */
.ListDisc li:before {
left: 1px;
top: 8px;
width: 14px;
height: 14px;
border-radius: 100%;
background: #000;
content: '';
}

/* ディスク：小（ListDiscS） */
.ListDiscS li:before {
content: '';
}

/* 米印（ListKome） */
.ListKome li:before {
top: 0;
left: 0;
content: '※';
}

/* 米印：小（ListKomeS） */
.ListKomeS li:before {
top: 0;
left: 0;
content: '※';
}

/* 連番：小（ListNumS） */
.ListNumS li:before {
content: counter(ListNum)".";
}

/* 米印連番：小（ListKomeNumS） */
.ListKomeNumS li:before {
content: "※"counter(ListNum);
}

#Page_KompanGreenline .SectionMain .ListDisc li {
font-size: 16px;
font-weight: bold;
line-height: 2.0em;
}

#Page_KompanGreenline .SectionMain .ListDisc li:before {
background: #2c7e81;
}

#Page_KompanGreenline .KomeS {
display: inline-block;	
position: relative;
margin-top: 5px;
padding-left: 15px;
font-size: 12px;	
}

#Page_KompanGreenline .KomeS:before {	
display: inline-block;
position: absolute;	
top: 1px;
left: 0;
content: '※';
}



/* ■ タイトル --------------------------------------------------- */

#Page_KompanGreenline .TitleArea {
position: relative;
width: 940px;
margin: 0 auto 40px auto;
}

#Page_KompanGreenline .TitleArea .CatchCopy {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
}

#Page_KompanGreenline .TitleArea h1.Title {
line-height: 1.0em;
}

#Page_KompanGreenline .TitleArea .LogoKompan {
position: absolute;
right: 0;
bottom: 0;
}

#Page_KompanGreenline .TitleArea .LogoKompan img {
width: 201px;
height: auto;
}



/* ■ キービジュアル --------------------------------------------------- */
#Page_KompanGreenline #KeyVisual {
margin-bottom: 55px;	
}

/* スライダー */
#Page_KompanGreenline .slick-dots {
left: 50%;
width: 100%;
margin-top: 20px;
margin-left: -4.2%;
}

#Page_KompanGreenline .slick-dots li {
margin: 0 10px;
padding: 0;
width: 10px;
height: 10px;
}    

#Page_KompanGreenline .slick-dots li button {
background: #c2e2e2;
}

#Page_KompanGreenline .slick-dots li.slick-active button {
background: #2c7e81;
}



/* ■ 廃棄物をリサイクルしてつくる遊具 --------------------------------------------------- */

#Page_KompanGreenline .SectionReason h2.MdsH2 {
margin-bottom: 60px;
}

/*
#Page_KompanGreenline .SectionReason .BtnWrap {
margin-top: 60px;
}
*/

#Page_KompanGreenline .SectionReason .BtnWrap {
margin-top: 60px;
}

#Page_KompanGreenline .SectionReason .LeadMainUnit {
display: flex;
margin-bottom: 90px;
justify-content:space-between;
}

#Page_KompanGreenline .SectionReason .LeadMainUnit .SectionSubIn {
position: relative;
padding-bottom: 125px;
width: 47%;
align-items: baseline;
}

#Page_KompanGreenline .SectionReason .LeadMainUnit .SectionSubIn:first-child {
border-right: 1px solid #d1d1d1;
}

#Page_KompanGreenline .SectionReason .LeadMainUnit h3.Mds {
font-size: 20px;
color: #2c7e81;
}

#Page_KompanGreenline .SectionReason .LeadMainUnit .ListDisc {
margin-top: 20px;
}

#Page_KompanGreenline .SectionReason .LeadMainUnit .BtnDetail {
position: absolute;
left: 0;
bottom: 35px;
width: 65%;
margin:0;
padding: 20px 0;
border-radius: 10px;
background: #8ab627 url(/images/pages/feature/kompan_greenline/common/icon/Icon_LinkDown_White.png) no-repeat;
background-size: 18px auto;
background-position: 96% 50%;
font-size: 16px;
color: #fff;
}

#Page_KompanGreenline .SectionReason .SectionReasonIn {
display: flex;
width: 100%;
margin-bottom: 75px;
justify-content: space-between;
}

#Page_KompanGreenline .SectionReason .SectionReasonIn.R {
flex-direction:row-reverse;
}

#Page_KompanGreenline .SectionReason .SectionReasonIn .LeadBox {
width: 60%;
}

#Page_KompanGreenline .SectionReason .SectionReasonIn .PhotoBox {
width: 36%;
}

#Page_KompanGreenline .SectionReason .SectionReasonIn h3.Mds {
margin-bottom: 15px;
font-size: 20px;
color: #2c7e81;
}

#Page_KompanGreenline .SectionReason .SectioFeatureEach {
margin-top: 70px;
}

#Page_KompanGreenline .SectionReason .SectioFeatureEach h4.Mds {
margin-bottom: 15px;
font-size: 20px;
color: #2c7e81;
}

#Page_KompanGreenline .SectionReason .SectioFeatureIn {
display: flex;
width: 100%;
justify-content: space-between;
}

#Page_KompanGreenline .SectionReason .SectioFeatureIn.R {
flex-direction:row-reverse;
}

#Page_KompanGreenline .SectionReason .SectioFeatureIn:not(:first-of-type){
margin-top: 40px;
}

#Page_KompanGreenline .SectionReason .SectioFeatureIn .LeadBox {
width: 60%;
}

#Page_KompanGreenline .SectionReason .SectioFeatureIn .PhotoBox {
width: 36%;
}

#Page_KompanGreenline .SectionReason .SectionFeature .WireList {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #c1c1c1;
}

#Page_KompanGreenline .SectionReason .SectionFeature .WireList h5.Mds {
margin-bottom: 25px;
font-size: 20px;
text-align: center;
line-height: 1.0em;
color: #2c7e81;
}

#Page_KompanGreenline .SectionReason .SectionFeature .WireList .Photo {
margin-bottom: 15px;
}



/* ■ 主な製品のご紹介 --------------------------------------------------- */

#Page_KompanGreenline .ProductWrap {
width: 940px;
margin: 80px auto 0 auto;
}

#Page_KompanGreenline .ProductWrap .Note {
margin-top: 20px;
text-align: right;
}

#Page_KompanGreenline .SectionProduct h2.MdsH2 {
margin-bottom: 70px;
}

#Page_KompanGreenline .SectionProduct .SectionSub {
margin-bottom: 85px;
}

#Page_KompanGreenline .SectionProduct .SectionSub:last-of-type {
margin-bottom: 0;
}

#Page_KompanGreenline .SectionProduct .SectionSub:nth-of-type(3) h3.MdsH3 {
width: 360px;
margin-left: -180px;
}

#Page_KompanGreenline .SectionProduct .SectionSubIn {
margin-bottom: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #c1c1c1;
}

#Page_KompanGreenline .SectionProduct .SectionSubIn:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

#Page_KompanGreenline .SectionProduct .SectionSubIn .PhotoList,
#Page_KompanGreenline .SectionProduct .SectionSubIn .PhotoList2 {
margin-bottom: 25px;
}

#Page_KompanGreenline .SectionProduct .SectionSubIn .IconStockNumber {
display: inline-block;
margin-bottom: 15px;
padding: 8px 15px;
box-sizing: border-box;
border-radius: 6px;
background: #2c7e81;
font-weight: bold;
text-align: center;
line-height: 1.0em;
color: #fff;
}

#Page_KompanGreenline .SectionProduct .SectionSubIn .Detail {
margin-bottom: 25px;
}

#Page_KompanGreenline .SectionProduct .SectionSubIn .ProductName,
#Page_KompanGreenline .SectionProduct .SectionSubIn .IconAge {
display: inline-block;
vertical-align: middle;
}

#Page_KompanGreenline .SectionProduct .SectionSubIn .ProductName {
font-size: 24px;
font-weight: bold;
line-height: 1.0em;
}

#Page_KompanGreenline .SectionProduct .SectionSubIn .IconAge {
margin-left: 20px;
padding: 5px 15px;
box-sizing: border-box;
border-radius: 12.5px;
background: #fff;
border: 2px solid #2c7e81;
font-size: 13px;
font-weight: bold;
line-height: 1.0em;
color: #2c7e81;
}

#Page_KompanGreenline .SectionProduct .SectionSubIn .LeadShop {
margin-top: 30px;
font-weight: bold;
color: #2c7e81;
}



/* ■ 遊具を実際にご覧いただけます --------------------------------------------------- */

#Page_KompanGreenline .SectionShop {
margin-top: 60px;
padding: 45px 0 55px 0;
box-sizing: border-box;
border-radius: 15px;
border: 5px solid #2c7e81;
}

#Page_KompanGreenline .SectionShop h3.Mds {
margin-bottom: 30px;
font-size: 24px;
line-height: 1.0em;
color: #2c7e81;
text-align: center;
}

#Page_KompanGreenline .SectionShop > .Lead1 {
width: 800px;
margin: 0 auto 0 auto;
text-align: center;
}

#Page_KompanGreenline .SectionShop .Lead2 {
margin-top: 30px;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #2c7e81;
text-align: center;
}

#Page_KompanGreenline .SectionShop .Photo {
width: 590px;
margin: 40px auto;
}

#Page_KompanGreenline .SectionShop .Txt_CopyRight {
display: block;
font-size: 13px;
text-align: right !important;
}

