@charset "UTF-8";
/*2019年6月 サステナビリティTOPの更新用*/

/* ---------- ---------- ---------- 
	:: index ::

01. Heading

---------- ---------- ---------- */


/* ---------- ---------- ---------- 
:: for large screen ::
@media only screen and (min-width: 1025px) {
}
:: for medium screen ::
@media only screen and (min-width: 641px) and (max-width: 1024px) {
}
:: for small screen ::
@media only screen and (max-width: 640px) {
}
---------- ---------- ---------- */


/* 01. Heading
---------- ---------- ---------- */
/* 01-1. Heading Lv1 : category top
---------- ---------- */
/* text position */
@media only screen and (min-width: 1025px) {
	.corp-cat-headingLv1-top .l-PageTitle__titleBlock__titleBox {
		top: 30%;
		left: 0%;
	}
}
@media only screen and (min-width: 641px) and (max-width: 1024px) {
	.corp-cat-headingLv1-top .l-PageTitle__titleBlock__titleBox {
		top: 30%;
		left: 0%;
	}
}
@media only screen and (max-width: 640px) {
	.corp-cat-headingLv1-top .l-PageTitle__titleBlock__titleBox {
		top: 10%;
		left: 0%;
	}
}

/*---------------------------------------------------------------------------
サステナビリティ設定
※ 他の編集できないCSSの関係もあり、基本的に画面サイズに関わらず同じ内容の装飾を記述しています。
※ 不要な記述を見つけたら、削除してもOKです。
※ 編集前はバックアップを取ること
-----------------------------------------------------------------------------*/
/*--------------------------------------------------------------
2カラムテキスト部分の設定
----------------------------------------------------------------*/ 
/*------PCサイズ---------------------------*/
@media only screen and (min-width: 1025px) {
    .text_font_size_setting_01{
        font-size: 23px;
        margin-top: 0 !important;
    }
    .text_font_size_setting_02{
        font-size: 16px;
        margin-top: 0 !important;
    }
}
/*------タブレットサイズ---------------------------*/
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .text_font_size_setting_01{
        font-size: 23px;
        margin-top: 0 !important;
    }
    .text_font_size_setting_02{
        font-size: 16px;
        margin-top: 0 !important;
    } 
}
/*------スマホサイズ---------------------------*/
@media only screen and (max-width: 640px) {
    .text_font_size_setting_01{
        font-size: 23px;
        margin-top: 0 !important;
    }
    .text_font_size_setting_02{
        font-size: 16px;
        margin-top: 0 !important;
    }
}
/*--------------------------------------------------------------
サブテキスト部分の設定
⇒ position:aboslute; を付与している箇所の、top、left、right、bottomの値を調整すれば
緑矢印の位置を調整できます。
----------------------------------------------------------------*/ 
/*------PCサイズ---------------------------*/
@media only screen and (min-width: 1025px) {
    .sustainability_sub_text_setting .corp-button .is-leftIcon .l-ButtonUnit__link .cmn-richtext{
        padding-left: 0 !important;
    }
    .sustainability_sub_text_setting .is-equalWidth .g-ButtonUnit{
        color: #717173; 
        position: relative;
    }
    .sustainability_sub_text_setting .corp-button .l-ButtonUnit .l-ButtonUnit__link .l-ButtonUnit__link__icon{
        position: absolute;
        left: -37px;
    }
    .sustainability_sub_text_setting .corp-button .l-ButtonUnit .l-ButtonUnit__link{
        border: 0;
        padding: 0;
    }
    .sustainability_sub_text_setting .g-ButtonP.is-gutter--none .g-ButtonP__list__item{
        width: auto;
        float: right;
    }
    .sustainability_sub_text_setting .g-ButtonUnit a:hover{
        background: transparent;
    }
}
/*------タブレットサイズ---------------------------*/
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .sustainability_sub_text_setting .corp-button .is-leftIcon .l-ButtonUnit__link .cmn-richtext{
        padding-left: 0 !important;
    }
    .sustainability_sub_text_setting .is-equalWidth .g-ButtonUnit{
        color: #717173;
        position: relative;
    }
    .sustainability_sub_text_setting .corp-button .l-ButtonUnit .l-ButtonUnit__link .l-ButtonUnit__link__icon{
        position: absolute;
        left: -37px;
    }
    .sustainability_sub_text_setting .corp-button .l-ButtonUnit .l-ButtonUnit__link{
        border: 0;
        padding: 0;
    }
    .sustainability_sub_text_setting .g-ButtonP.is-gutter--none .g-ButtonP__list__item{
        width: auto;
        float: right;
    }
    .sustainability_sub_text_setting .g-ButtonUnit a:hover{
        background: transparent;
    } 
}
/*------スマホサイズ---------------------------*/
@media only screen and (max-width: 640px) {
    .sustainability_sub_text_setting .corp-button .is-leftIcon .l-ButtonUnit__link .cmn-richtext{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .sustainability_sub_text_setting .is-equalWidth .g-ButtonUnit{
        color: #717173;   
        position: relative;
    }
    .sustainability_sub_text_setting .corp-button .l-ButtonUnit .l-ButtonUnit__link .l-ButtonUnit__link__icon{
        position: absolute;
        left: -37px;
    }
    .sustainability_sub_text_setting .corp-button .l-ButtonUnit .l-ButtonUnit__link{
        border: 0;
        padding: 0;
    }
    .sustainability_sub_text_setting .g-ButtonP.is-gutter--none .g-ButtonP__list__item{
        width: auto;
        float: right;
    }
    .sustainability_sub_text_setting .g-ButtonUnit a:hover{
        background: transparent;
    }
}
/*--------------------------------------------------------------
アコーディオン開閉ボタンの設定（閉じている時）
⇒ アコーディオン部分を閉じている時に付与されるクラス「.is-radius--close」を起点に
   装飾を適用してます。
⇒「.close_button_img」が「閉じている時に表示されるべき画像」「.open_button_img」が「開いている時に表示されるべき画像」となってます。
----------------------------------------------------------------*/ 
/*------PCサイズ---------------------------*/
@media only screen and (min-width: 1025px) {
	.is-radius--close .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .close_button_img{
		display: block;
		max-width: 500px;
		margin-left: 30%;
	}
	.is-radius--close .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .open_button_img{
		display: none;
		max-width: 500px;
	}
}
/*------タブレットサイズ---------------------------*/
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .is-radius--close .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .close_button_img{
		display: block;
		max-width: 50%;
		margin-left: 25%;
	}
	.is-radius--close .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .open_button_img{
		display: none;
		max-width: 50%;
	}
}
/*------スマホサイズ---------------------------*/
@media only screen and (max-width: 640px) {
    .is-radius--close .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .close_button_img{
		display: block;
		max-width: 500px;
		margin-left: 0;
	}
	.is-radius--close .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .open_button_img{
		display: none;
		max-width: 500px;
	}
}
/*--------------------------------------------------------------
アコーディオン開閉ボタンの設定（開いている時）
⇒ アコーディオン部分を閉じている時に付与されるクラス「.is-radius--close」を起点に
   装飾を適用してます。
⇒「.close_button_img」が「閉じている時に表示されるべき画像」「.open_button_img」が「開いている時に表示されるべき画像」となってます。
----------------------------------------------------------------*/ 
/*------PCサイズ---------------------------*/
@media only screen and (min-width: 1025px) {
	.is-radius--open .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .close_button_img{
		display: none;
		max-width: 500px;
	}
	.is-radius--open .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .open_button_img{
		display: block;
		max-width: 500px;
		margin-left: 30%;
	}
}
/*------タブレットサイズ---------------------------*/
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .is-radius--open .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .close_button_img{
		display: none;
		max-width: 50%;
	}
	.is-radius--open .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .open_button_img{
		display: block;
		max-width: 50%;
		margin-left: 25%;
	}
}
/*------スマホサイズ---------------------------*/
@media only screen and (max-width: 640px) {
    .is-radius--open .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .close_button_img{
		display: none;
		max-width: 500px;
	}
	.is-radius--open .g-AccordionUnit__titleBlock .g-HeadingTitle .g-HeadingTitle__titleBlock .g-HeadingTitle__titleBlock__titleBox .g-HeadingTitle__titleBlock__titleBox__title .g-HeadingTitle__h3 .cmn-richtext span.open_close_text .open_button_img{
		display: block;
		max-width: 500px;
		margin-left: 0;
	}
}
/*--------------------------------------------------------------
アコーディオンボタン周りの余白設定
⇒ 背景色の設定と、デフォルトで付いているpaddingのリセット
⇒ margin-topの値をいじりますと、ボタン部分とボタン上部画像との余白を調整できます。
----------------------------------------------------------------*/
/*------PC時サイズ---------------------------*/
@media only screen and (min-width: 1025px) {	
	.g-AccordionUnit .open_close_setting{
		padding: 0;
		background: #f8f8f8;
		margin-top: 20px;
	}
    .open_close_setting .g-HeadingTitle{
		margin: 0;
	}
}
/*------タブレットサイズ---------------------------*/
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .g-AccordionUnit .open_close_setting{
		padding: 0;
		background: #f8f8f8;
		margin-top: 20px;
	}
	.open_close_setting .g-HeadingTitle{
		margin: 0;
	}
}
/*------スマホサイズ---------------------------*/
@media only screen and (max-width: 640px) {
    .g-AccordionUnit .open_close_setting{
		padding: 0;
		background: #f8f8f8;
		margin-top: 20px;
	}
	.open_close_setting .g-HeadingTitle{
		margin: 0;
	}
}  
/*--------------------------------------------------------------
アコーディオン展開時の画像周りの余白削除
⇒ 展開前の画像と同じサイズで表示するために、展開後画像周りに付与されているpaddingをリセットしてます。
----------------------------------------------------------------*/
/*------PC時サイズ---------------------------*/
@media only screen and (min-width: 1025px) {
	.open_padding_setting .g-AccordionUnit__contentBlock{
		padding: 0;
	}
}
/*------タブレットサイズ---------------------------*/
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .open_padding_setting .g-AccordionUnit__contentBlock{
		padding: 0;
	}
}
/*------スマホサイズ---------------------------*/
@media only screen and (max-width: 640px) {
    .open_padding_setting .g-AccordionUnit__contentBlock{
		padding: 0;
	}
}   
/*--------------------------------------------------------------
カルーセルコンテンツ以外のコンテンツ表示幅の設定（H1が入っていないセクション）
⇒ デフォルトでコンテンツ幅(max-width)が指定されているため、カルーセルに合わせる形の装飾変更記述
----------------------------------------------------------------*/ 
/*------PC時サイズ---------------------------*/
@media only screen and (min-width: 1025px) {
	.sustainability_section_setting .g-Section__inner{
		max-width: 1366px !important;
		margin-bottom: 0 !important;
	}  
}
/*------タブレットサイズ---------------------------*/
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .sustainability_section_setting .g-Section__inner{
		max-width: 1366px !important;
		margin-bottom: 0 !important;
	} 
}
/*------スマホサイズ---------------------------*/
@media only screen and (max-width: 640px) {
    .sustainability_section_setting .g-Section__inner{
		max-width: 1366px !important;
		margin-bottom: 0 !important;
	} 
}
/*--------------------------------------------------------------
カルーセルコンテンツ以外のコンテンツ表示幅等の設定（H1が入ってるセクション）
⇒ デフォルトでコンテンツ幅(max-width)が指定されているため、カルーセルに合わせる形の装飾変更記述
⇒ デフォルトで付与されているH1のボーダー削除
----------------------------------------------------------------*/ 
/*------PC時サイズ---------------------------*/
@media only screen and (min-width: 1025px) {
	.sustainability_section_setting{
		border: 0 !important;
	}
	.sustainability_section_setting .corp-cat-headingLv1 .l-PageTitle__titleBlock{
		max-width: 1366px !important;
	}
	.sustainability_section_setting .corp-cat-headingLv1 .l-PageTitle__titleBlock__titleBox__title{
		border: 0;
		padding: 0;
	}
}
/*------タブレットサイズ---------------------------*/
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .sustainability_section_setting{
		border: 0 !important;
	}
	.sustainability_section_setting .corp-cat-headingLv1 .l-PageTitle__titleBlock{
		max-width: 1366px !important;
	}
	.sustainability_section_setting .corp-cat-headingLv1 .l-PageTitle__titleBlock__titleBox__title{
		border: 0;
		padding: 0;
	}
}
/*------スマホサイズ---------------------------*/
@media only screen and (max-width: 640px) {
    .sustainability_section_setting{
		border: 0 !important;
	}
	.sustainability_section_setting .corp-cat-headingLv1 .l-PageTitle__titleBlock{
		max-width: 1366px !important;
	}
	.sustainability_section_setting .corp-cat-headingLv1 .l-PageTitle__titleBlock__titleBox__title{
		border: 0;
		padding: 0;
	}
}
/*--------------------------------------------------------------
H1付近の余白調整設定
⇒ H1上部の余白を、H1下の余白と合わせるための装飾記述です。
※ line-heightや、他CSSで付与されているっぽい余白の関係もありますので
余白を広げるだけならpadding-topの数値をいじれば良いですが、余白を削る場合はデベロッパーが確認しつつ調整してください。
----------------------------------------------------------------*/ 
/*------PC時サイズ---------------------------*/
@media only screen and (min-width: 1025px) {
	.sustainability_section_setting .g-Section__inner .g-Column .g-Column__inner .g-Column__cols{
		padding-top: 20px !important;
		padding-bottom: 0 !important;
	}
}
/*------タブレットサイズ---------------------------*/
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .sustainability_section_setting .g-Section__inner .g-Column .g-Column__inner .g-Column__cols{
		padding-top: 20px !important;
		padding-bottom: 0 !important;
	}
}
/*------スマホサイズ---------------------------*/
@media only screen and (max-width: 640px) {
    .sustainability_section_setting .g-Section__inner .g-Column .g-Column__inner .g-Column__cols{
		padding-top: 20px !important;
		padding-bottom: 0 !important;
	}
}
/*--------------------------------------------------------------
※ タブレット表示時限定の余白調整
----------------------------------------------------------------*/ 
@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .sustainability_section_setting .opt-mt10--imp{
		margin-top: 20px !important;
	}
	.sustainability_top_margin_bottom .l-Section__inner{
		margin-bottom: 0 !important;
	}
}