/* =============================
汎用
=============================*/
/* 汎用のフォントを指定 */
* {
font-family:"Noto Sans JP", sans-serif;
}
a:link,a:visited {color:inherit; text-decoration:none;}
#content{
background-color: #F8F8F8;
position: relative;
}
/* 画像の汎用の設定 */
img::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.ct_fade_item{
opacity: 0;
transition: opacity ease-out 0.5s;
}
.ct_fade_item.fade_in
{
opacity: 1;
}
*{-webkit-transition:ease-out .16s; transition:ease-out .16s;}
/*PC*/
@media screen and (min-width: 1025px) {
.ct_not_pc{
display: none !important;
}
.ct_tb_only{
display: none !important;
}
.ct_sp_only{
display: none !important;
}
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
.ct_pc_only{
display: none !important;
}
.ct_sp_only{
display: none !important;
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
.ct_pc_only{
display: none !important;
}
.ct_tb_only{
display: none !important;
}
.ct_not_sp{
display: none !important;
}
}

/* =============================
ヘッダー部
=============================*/
/* ヘッダー */
.ct_header {
border-top: 3px solid #E80A03;
padding-top: 10px;
}
/*PC*/
@media screen and (min-width: 1025px) {
/* ヘッダー */
.ct_header {padding-top: 5px;padding-bottom: 5px;}
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
/* ヘッダー */
.ct_header {padding: 7.5px 0;}
}
/*スマホ*/
@media screen and (max-width: 767px) {
/* ヘッダー */
.ct_header {padding-top: 5px;padding-bottom: 5px;
display: flex;
justify-content: space-between;}
/* アイコン部 */
.sp_menu {
display: flex;
justify-content: space-between;
padding: 3px 0;
margin-right: 5px;
font-size: 8px;
text-align: center;
color: #333333;
}
/* アイコンサイズ */
.sp_menu .search,
.sp_menu .h_menu{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;

cursor: pointer;
text-align: center;
}
/* 虫眼鏡 */
.sp_menu .search {
margin-right: 9px;
}
.sp_menu .s_icon > .icon{
height: auto;
margin: auto;
}

/* ハンバーガーメニュー */
.sp_menu .h_menu{
position: relative;
padding-left: 4px;
}
.h_menu:before{
position: absolute;
content: "";
width: 1px;
height: 20px;
background-color: #333333;
top: 3px;
left: 0;
}

.sp_menu .h_icon > .icon > span{
display: block;
width: 20px;
height: 3px;
margin: 0 auto 4px;

background-color: #333333;
}
.sp_menu .h_icon > .icon > span:last-child{
margin-bottom: 0;
}
}
/* サイトロゴ */
.ct_header .ct_wrap_img {
margin-left: 4.2%;
}
/* =============================
パンくずリスト
=============================*/
/* 画像に位置を合わせる */
.ct_wrap_nav_org {
margin-left: 4%;
}
/* デフォルト設定を削除 */
.breadcrumb-wrapper{
position: relative;
z-index: 10000;
background-color: #fff;
width: 100%;
}
.breadcrumb-list.ct_wrap_nav_org {
padding-left: 0;
}

.breadcrumb-list a {
text-decoration: underline;
}
.breadcrumb-list a:link {
color: #005e8c;
}
.breadcrumb-list a:visited {
color: #5a2680;
text-decoration: none;
}
.breadcrumb-list a:not([href]){
text-decoration: none;
}

/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
.breadcrumb-list.ct_wrap_nav_org {
padding: 13.5px 0;
}
}

/* =============================
メインビジュアル
=============================*/
/* メインビジュアル領域のコンテナ */
.ct_section_mv {
position: relative;
width: 100%;
background-color: #FFFFFF;
}
.ct_scroll_btn{
display: none;
}
/*PC*/
@media screen and (min-width: 1025px) {
.ct_section_mv {
padding-left: 4%;
height: 80vh;
max-height: 700px;
}
.ct_scroll_btn{
position: absolute;
display: block;
left: -50px;
bottom: 55px;
font-family: Avenir;
transform: rotate(90deg);
font-size: 1.4rem;
z-index: 16;
cursor: pointer;
padding: 12px;
}
.ct_scroll_btn:hover{
transform: rotate(90deg) translateX(8px);
}
.ct_scroll_btn img{
margin-left: 16px;
transform: rotate(180deg);
}
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
.ct_section_mv {
margin-left: 3%;
width: 97%;
height: 860px;
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
.ct_section_mv {
height: calc(100vw * 500 / 375);
}
}
.ct_section_mv .ct_wrap_img {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.ct_section_mv .ct_wrap_img a,
.ct_section_mv .ct_wrap_img div,
.ct_section_mv .ct_wrap_img img{
transition: opacity 1s, filter 0.5s, transform 7s;
}
.ct_section_mv .ct_wrap_img .visible{
opacity: 1;
filter: brightness(1);
transform: scale(1.07);
}
.ct_section_mv .ct_wrap_img .invisible{
opacity: 0;
pointer-events: none;
filter: brightness(1.8);
transform: scale(1);
}
/* メインビジュアル */
.ct_section_mv .ct_wrap_img a, .ct_section_mv .ct_wrap_img div{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.ct_section_mv .ct_wrap_img img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
max-width: 100%;
}

/* メインメッセージ格納部 */
.ct_section_mv .ct_wrap_mv_main_msg {
position: absolute;
color: white;
text-align: right;
}
.ct_section_mv .ct_wrap_mv_main_msg .ct_wrap_mv_main_msg_large * {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif !important;
font-weight: 300;
}
.fw500{
    font-weight: 500;
}
/*PC*/
@media screen and (min-width: 1025px) {
/* メインメッセージ格納部 */
.ct_section_mv .ct_wrap_mv_main_msg {
/* top: 210px; */
top: 47%;
transform: translateY(-50%);
right: 5%;
}
/* メインメッセージ（大） */
.ct_section_mv .ct_wrap_mv_main_msg_large {
position: relative;
font-size: 4rem;
line-height: 164.5%;
font-weight: 500;
}
/* メインメッセージ（小） */
.ct_section_mv .ct_wrap_mv_main_msg_small{
margin-top: 30px;
font-size: 2.1rem;
line-height: 154%;
font-weight: bold;
}
}
/* 詳細ボタン */
.ct_txt_mv_small_item_btn .ct_btn_detail{
margin: 28px 0 0 auto;
height: 42px;
width: fit-content;
padding: 0 55px 0 40px;
border: #BC3030 1px solid;
border-radius: 4px;
position: absolute;
left: 0;
right: 0;
background-color: #FFFFFF;
box-sizing: border-box;
color: #BC3030;
display: flex;
align-items: center;
justify-content: center;
/* transition:ease-out .16s; */
font-size: 1.4rem;
font-weight: 500;
line-height: 120%;
overflow: hidden;
pointer-events: none;
opacity: 0;
}
.ct_txt_mv_small_item_btn .ct_btn_detail.invisible{
opacity: 0;
visibility: hidden;
transition: opacity .2s;
}
.ct_txt_mv_small_item_btn .ct_btn_detail.visible{
display: flex;
visibility: visible;
opacity: 1;
transition: opacity .2s .2s;
}
.ct_txt_mv_small_item_btn .ct_btn_detail::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
/* border-radius: 4px; */
}
.ct_txt_mv_small_item_btn .ct_btn_detail.invisible::before{
transform: translateX(-100%);
}
.ct_txt_mv_small_item_btn .ct_btn_detail.visible::before{
transform: translateX(101%);
transition: transform .4s ease-in-out .2s;
}
/* 詳細ボタン hover時 */
@media screen and (max-width: 1024px) {
.ct_txt_mv_small_item_btn .ct_btn_detail{
pointer-events: all;
}
}
@media screen and (min-width: 1025px) {
.ct_section_mv:hover .ct_txt_mv_small_item_btn .ct_btn_detail{
border: #BC3030 1px solid;
background-color: #BC3030;
color: #FFFFFF;
}
}
/* 矢印の配置 */
.ct_txt_mv_small_item_btn .ct_btn_detail img{
position: absolute;
right: 32px;
bottom: 38%;
width: 15px;
transition: ease-out 0.16s;
}
.ct_txt_mv_small_item_btn .ct_btn_detail.photo_movie img{
position: absolute;
right: 30px;
bottom: 23%;
width: 22px;
}
.ct_txt_mv_small_item_btn .ct_btn_detail .ct_icon_arrow_white{
display: none;
}
@media screen and (min-width: 1025px) {
.ct_section_mv:hover .ct_txt_mv_small_item_btn .ct_btn_detail .ct_icon_arrow_white{
display: block;
}
.ct_section_mv:hover .ct_txt_mv_small_item_btn .ct_btn_detail .ct_icon_arrow{
display: none;
}
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
/* メインメッセージ格納部 */
.ct_section_mv .ct_wrap_mv_main_msg {
bottom: 268px;
right: 46px;
}
/* メインメッセージ（大） */
.ct_section_mv .ct_wrap_mv_main_msg_large {
position: relative;
font-size: 3.6rem;
line-height: 150%;
font-weight: 500;
}
/* メインメッセージ（小） */
.ct_section_mv .ct_wrap_mv_main_msg_small{
margin-top: 27px;
font-size: 2.1rem;
line-height: 186%;
font-weight: bold;
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
/* メインメッセージ格納部 */
.ct_section_mv .ct_wrap_mv_main_msg {
top: calc(100vw * 242 / 375);
right: 7%;
pointer-events: none;
}
/* メインメッセージ（大） */
.ct_section_mv .ct_wrap_mv_main_msg_large {
position: relative;
font-size: 2.2rem;
line-height: 145%;
font-weight: 500;
}
/* メインメッセージ（小） */
.ct_section_mv .ct_wrap_mv_main_msg_small{
margin-top: 11px;
font-size: 1.2rem;
line-height: 183%;
font-weight: bold;
}
/* 詳細ボタン */
.ct_txt_mv_small_item_btn .ct_btn_detail{
margin: 14px auto 0;
padding: 0 25px;
height: 50px;
width: 272px;
font-size: 1.2rem;
line-height: 160%;
text-align: center;
}
}

/* 動画再生アイコン */
.ct_section_mv .ct_wrap_play_icon{
position: absolute;
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.7);
text-align: center;
}
/*PC*/
@media screen and (min-width: 1025px) {
/* 動画再生アイコン */
.ct_section_mv .ct_wrap_play_icon{
bottom: 12%;
right: 5%;
}
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
/* 動画再生アイコン */
.ct_section_mv .ct_wrap_play_icon{
bottom: 71px;
right: 5%;
}

}
/*スマホ*/
@media screen and (max-width: 767px) {
/* 動画再生アイコン */
.ct_section_mv .ct_wrap_play_icon{
display: none;
}
}

/* アイコン設定 */
.ct_section_mv .ct_wrap_play_icon img {width: 116px;height: 116px;}
.mv_play_icon{
width: 116px;
height: 116px;
background-image: url(/ldg/ja/information/ieq/img/icon_play.svg);
background-size:cover; 
}
.mv_play_icon:hover{background-image: url(/ldg/ja/information/ieq/img/icon_play_hover.svg);}


.ct_wrap_play_icon .ct_txt_play_msg{
font-family: Avenir;
}
/* 再生のアイコン（通常用） ホバー時*/
.ct_wrap_play_icon .ct_state_hover{
display: none;
}
/* 再生のアイコン（hover用） 通常時*/
.ct_wrap_play_icon:hover .ct_state_hover{
display: block;
}
/* 再生のアイコン（hover用） hover時*/
.ct_wrap_play_icon:hover .ct_state_default{
display: none;
}

/* 画像変更部品コンテナ */
.ct_section_mv .ct_wrap_img_changers{
position: absolute;
color: rgba(255, 255, 255, 0.8);
text-align: center;
display: flex;
}
.ct_section_mv .ct_box_img_changer:last-child{
margin-right: 0;
}

/*PC*/
@keyframes progress {
0%{
width: 0;
}
100%{
width: 100%;
}
}
.ct_box_img_changer .ct_bar_progress {
width: 0;
animation: progress 4.5s linear 1 both;
transition: width 0s;
height: 2px;
top: -2px;
}
.ct_box_img_changer.done .ct_bar_progress {
animation: unset;
width: 100%;
height: 1px;
top: -1px;
}
.ct_box_img_changer.yet .ct_bar_progress {
animation: unset;
}
@media screen and (min-width: 1025px) {
/* 画像変更部品コンテナ */
.ct_section_mv .ct_wrap_img_changers{
bottom: 16.2px;
right: calc(0.193 * (100vw - 1025px));
font-size: 1.2rem;
}
/* 画像変更部品 */
.ct_section_mv .ct_box_img_changer{
margin-right: 10px;
width: 6em;
cursor: pointer;
padding: 10px 0;
}
/* 文言 */
.ct_box_img_changer .ct_txt_no {
text-align: left;
margin-top: 5px;
font-family: Avenir;
font-size: 11px;
}

/* バー */
.ct_box_img_changer .ct_bar {
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.25);
}
/* 進行度バー */
.ct_box_img_changer .ct_bar_progress {
position: relative;
background-color: #FFFFFF;
left: 0;
}
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
/* 画像変更部品コンテナ */
.ct_section_mv .ct_wrap_img_changers{
bottom: 20px;
right: 0;
width: 50%;
justify-content: center;
}

/* 画像変更部品 */
.ct_section_mv .ct_box_img_changer{
margin-right: 12.5px;
width: 47px;
cursor: pointer;
padding: 10px 0;
}
/* 文言 */
.ct_box_img_changer .ct_txt_no {
margin-top: 5px;
font-family: Avenir;
font-size: 11px;
}

/* バー */
.ct_box_img_changer .ct_bar {
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.25);
}
/* 進行度バー */
.ct_box_img_changer .ct_bar_progress {
position: relative;
background-color: #FFFFFF;
left: 0;
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
/* 画像変更部品コンテナ */
.ct_section_mv .ct_wrap_img_changers{
position: absolute;
bottom: 25px;
left: 50%;
width: 80%;
transform: translate(-50%);
justify-content: center;
}

/* 画像変更部品 */
.ct_section_mv .ct_box_img_changer{
margin-right: 10px;
width: 10.1%;
height: 10px;
cursor: pointer;
padding: 10px 0;
}
/* 文言 */
.ct_box_img_changer .ct_txt_no {
display: none;
}  

/* バー */
.ct_box_img_changer .ct_bar {
width: 100%;
height: 2px;
background-color: rgba(255, 255, 255, 0.25);
}
/* 進行度バー */
.ct_box_img_changer .ct_bar_progress {
position: relative;
height: 3px;
background-color: #FFFFFF;
top: -3px;
left: 0;
}
.ct_box_img_changer.done .ct_bar_progress {
height: 2px;
top: -2px;
}
}




/* =============================
セクション1
=============================*/

/* セクション1全体設定 */
.ct_section1 {
width: 100%;
position: relative;
z-index: 15;
}
.sec1_img_area{
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/*PC*/
@media screen and (min-width: 1025px) {
/* テキスト部分 */
.ct_section1 .ct_box_msg {
width: 52%;
padding-top: calc(100vw * 100 / 1440);
padding-right: 5%;
padding-left: calc(100vw * 208 / 1440);
padding-bottom: 170px;
}
.sec1_img1 {
position: absolute;
left: calc(100vw / 1440 * 720);
top: calc(100vw / 1440 * 170);
width: calc(400 * 100vw / 1440);
}
.sec1_img2 {
position: absolute;
right: 0;
top: calc(322px + (100vw - 1440px) * 0.08);
width: calc(384 * 100vw / 1440);
}
.sec1_img3 {
position: absolute;
left: calc(100vw / 1440 * 837);
top: calc(489px + (100vw - 1440px) * 0.1);
width: calc(323 * 100vw / 1440);
}

/* テキスト（大） */
.ct_section1 .ct_txt_large {
font-size: 2.9rem;
line-height: 169%;
color: #525252;
}
/* テキスト（小） */
.ct_section1 .ct_txt_small {
margin-top: 36px;
font-size: 1.8rem;
line-height: 189%;
letter-spacing: 1.2px;
}
/* テキスト（小）間の間隔 */
.ct_txt_small + .ct_txt_small{
margin-top: 15px;
}
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
/* テキスト部分 */
.ct_section1 .ct_box_msg {
width: 50%;
padding-right: 6.8%;
padding-top: 135px;
padding-left: calc(100vw * 100 / 1024);
padding-bottom: 120px;
}
/* テキスト（大） */
.ct_section1 .ct_txt_large {
font-size: 2.4rem;
line-height: 183%;
color: #525252;
}
/* テキスト（小） */
.ct_section1 .ct_txt_small{
margin-top: 47px;
font-size: 1.6rem;
line-height: 188%;
letter-spacing: 1.2px;
}
/* テキスト（小）間の間隔 */
.ct_txt_small + .ct_txt_small{
margin-top: 20px;
}
.sec1_img1 {
position: absolute;
left: calc(100vw / 1024 * 512);
top: 65px;
width: calc(335 * 100vw / 1024);
}
.sec1_img2 {
position: absolute;
right: 0;
top: 220px;
width: calc(335 * 100vw / 1024);
}
.sec1_img3 {
position: absolute;
left: calc(100vw / 1024 * 535);
top: 420px;
width: calc(355 * 100vw / 1024);
}
}

/*タブレット, PC*/
@media screen and (min-width: 768px) {
/* セクション1全体設定 */
.ct_section1 {
padding-bottom: 150px;
}
/* テキスト部分 */
.ct_section1 .ct_box_msg {
position: relative;
top: -25px;
z-index: 2;;
background-color: #FFFFFF;
}

/* 画像領域 */
.ct_section1 .ct_box_section1 {
position: absolute;
z-index: 10;
top: 165px;
left: 52%;
right: 0;
}

/* 灰色領域 */
.ct_bg_gray{
position: absolute;
right: 0;
top: 0;
width: 46.5%;
height: 100%;
background-color: #F8F8F8;
}
}

/*スマホ*/
@media screen and (max-width: 767px) {
.ct_section1 {
display: flex;
flex-direction: column;
background-color: #F8F8F8;
}

/* テキスト部分 */
.ct_section1 .ct_box_msg {
margin-top: 64px;
}
/* テキスト（大） */
.ct_section1 .ct_txt_large {
margin-left: 11%;
font-size: 1.8rem;
line-height: 189%;
color: #525252;
}
/* テキスト（小）領域 */
.ct_section1 .ct_box_small_txt{
font-size: 1.8rem;
line-height: 188%;

border: #E6E6E6 1px solid;
background-color: #FFFFFF;

margin: 44.5px auto 0;

padding: 56px 8.5% 50px;
width: 95%;
}

/* テキスト（小） */
.ct_section1 .ct_txt_small{
font-size: 1.4rem;
line-height: 186%;
font-weight: 500;
}
/* テキスト（小）間の間隔 */
.ct_txt_small + .ct_txt_small{
margin-top: 15px;
}
.sec1_img_area{
position: relative;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: auto;
padding-bottom: calc(163 * 100vw / 375);
}
.sec1_img1 {
position: absolute;
right: calc(100vw / 375 * 20);
top: calc(100vw / 375 * -21);
width: calc(168 * 100vw / 375);
transition: ease-in-out;
z-index: 1;
}
.sec1_img2 {
position: absolute;
left: 0;
top: calc(100vw / 375 * 12);
width: calc(210 * 100vw / 375);
transition: ease-in-out;
z-index: 10;
}
.sec1_img3 {
position: relative;
left: calc(100vw / 375 * 62);
top: calc(100vw / 375 * 118);
width: calc(252 * 100vw / 375);
transition: ease-in-out;
z-index: 1;
}
/* 画像領域 */
.ct_section1 .ct_box_section1{
position: relative;
z-index: 10;
top: -60px;
left: 0;
width: 95%;
height: auto;
}
.ct_box_section1 img{
object-fit: cover;
width: 100%;
height: 100%;
}
.ct_bg_gray{
display: none;
}
}
/* =============================
セクション2
=============================*/
/* 全体設定 */
.ct_section2{
position: relative;
z-index: 10;
background-color: #F8F8F8;
}

/* クリック不可な応用商品 */
.ct_wrap_section2_txt .ct_box_apply_item.ct_state_disabled{
color: rgba(131, 131, 131, 0.9);
background-color: #F8F8F8;
border-color: #E0E0E0;
}



/* 画像以外 */
.ct_wrap_section2_txt{
position: relative;
background-color: transparent;
transition:ease-out 1s;
}
.ct_wrap_section2_txt.add_anime{
background-color: #FFFFFF;
}
.ct_wrap_section2 .intext{
opacity: 0 !important;
transition:ease-out 0.5s;
}
.ct_wrap_section2 .intext.add_anime{
opacity: 1 !important;
}

/*PC*/
@media screen and (min-width: 1025px) {
/* 表示内容 */
.ct_section2_wrapper {
width: 97.9%;
margin: 0 auto;
}

/* PC表示内容 */
.ct_wrap_other {
display: flex;
width: 100%;
}

/* 左右のcolumn */
.ct_wrap_other .ct_col {
display: flex;
flex-direction: column;
width: 45.5%;
}
/* カラム同士の間隔 */
.ct_col + .ct_col {
position: relative;
top: 200px;
margin-left: 4.5%;

}
/* 個々のアイテム */
.ct_wrap_other .ct_wrap_section2 {
position: relative;
width: 100%;
}

/* 個々のアイテム間の距離 */
.ct_col.left .ct_wrap_section2 + .ct_wrap_section2{
margin-top: 115px;
}
.ct_col.right .ct_wrap_section2 + .ct_wrap_section2{
margin-top: 0;
}

/* 画像 */
.ct_img_section2 {
width: 88%;
height: calc(300 * 100vw /1440);
background-repeat:  no-repeat;          
background-position:left top;
background-size:cover;
overflow: hidden;
}

/* 画像以外 */
.ct_wrap_section2_txt{
top: -100px;
left: 9%;
padding: 30px 9% 45px 12%;
width: 90%;
border: solid 1px #E6E6E6;
}
.ct_wrap_section2_txt.add_anime{
background-color: #FFFFFF;
}
.ct_wrap_section2 .intext{
opacity: 0 !important;
transition:ease-out 0.5s;
}
.ct_wrap_section2 .intext.add_anime{
opacity: 1 !important;
}

.ct_wrap_section2_txt .ct_txt_main_msg{
position: relative;
top: -20px;
right: -30px;
width: 100%;
text-align: right;
font-size: 5rem;
color: #D8D8D8;
box-sizing: content-box;
}

.ct_wrap_section2_txt .ct_txt_title{
font-size: 2.6rem;
line-height: 160%;
font-weight: 400;
color: #1A1A1A;
}

.ct_wrap_section2_txt .ct_txt_descriotion{
margin-top: 26px;
font-size: 1.6rem;
line-height: 188%;
color: #606060;
}

.ct_wrap_section2_txt hr {
display: block;
width: 100%;
height: 1px;
margin: 18px auto 9px;
background-color: #E0E0E0;
border: 0;
}

.ct_wrap_section2_txt .ct_txt_item_title{
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 7px;
color: #666666;
}

.ct_wrap_section2_txt .ct_txt_techs{
font-size: 1.4rem;
line-height: 171%;
margin-left: 1em;
color: #666666;
}

.ct_txt_techs + .ct_txt_item_title {
margin-top: 22px;
}
.ct_wrap_section2_txt .ct_wrap_apply_items{
margin-top: 8px;
margin-left: 1em;
display: flex;
flex-wrap: wrap;
}

.ct_wrap_section2_txt .ct_box_apply_item{
font-size: 1.2rem;
line-height: 100%;
padding: 4px 12px;
border: #B7B7B7 solid 1px;
border-radius: 16px;
margin-right: 5px;
margin-bottom: 10px;
}


}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
/* 表示内容 */
.ct_section2_wrapper{
width: 100%;
margin: 0 auto;
}

/* PC表示内容 */
.ct_wrap_other {
display: flex;
width: 100%;
}

/* 左右のcolumn */
.ct_wrap_other .ct_col {
display: flex;
flex-direction: column;
width: 50%;
}
/* カラム同士の間隔 */
.ct_col + .ct_col {
position: relative;
top: 171px;
}
/* 個々のアイテム */
.ct_wrap_section2 {
position: relative;
width: 100%;
}

/* 個々のアイテム間の距離 */
.ct_wrap_section2 + .ct_wrap_section2{
margin-top: 155px;
}

/* 画像 */
.ct_img_section2 {
width: 88%;
height: calc(254 * 100vw /1024);
background-repeat:  no-repeat;          
background-position:left top;
background-size:cover;
overflow: hidden;
}

/* 画像以外 */
.ct_wrap_section2_txt{
top: -85px;
left: 3%;
padding: 30px 14% 45px;
width: 90%;
}
/* メインメッセージ */
.ct_wrap_section2_txt .ct_txt_main_msg{
position: relative;
top: -16px;
right: -14%;
width: 100%;
text-align: right;
font-size: 3.6rem;
color: #D8D8D8;
}

.ct_wrap_section2_txt .ct_txt_title{
font-size: 2.2rem;
line-height: 164%;

font-weight: 500;
color: #1A1A1A;
margin-top: 8px;
}

.ct_wrap_section2_txt .ct_txt_descriotion{
margin-top: 26px;
font-size: 1.6rem;
line-height: 188%;
}

.ct_wrap_section2_txt hr {
display: block;
width: 100%;
height: 1px;
margin: 18px auto 9px;
background-color: #E0E0E0;
border: 0;
}

.ct_wrap_section2_txt .ct_txt_item_title{
font-size: 1.4rem;
font-weight: bold;
}

.ct_wrap_section2_txt .ct_txt_techs{
font-size: 1.4rem;
line-height: 157%;
margin-left: 1em;
color: #666666;
}

.ct_txt_techs + .ct_txt_item_title {
margin-top: 11px;
}
.ct_wrap_section2_txt .ct_wrap_apply_items{
margin-top: 8px;
margin-left: 1em;
display: flex;
flex-wrap: wrap;
}

.ct_wrap_section2_txt .ct_box_apply_item{
font-size: 1rem;
line-height: 230%;
padding: 4px 12px;
border: #B7B7B7 solid 1px;
border-radius: 17px;
margin-right: 3px;
margin-bottom: 6px;
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
/* 全体設定 */
.ct_section2{
padding-top: 85px;
}
/* 表示内容 */
.ct_section2_wrapper{
width: 100%;
margin: 0 auto;
}

/* SP表示内容 */
.ct_wrap_sp {
display: flex;
flex-direction: column;
width: 100%;
}

/* 個々のアイテム */
.ct_wrap_section2 {
position: relative;
width: 100%;
}

/* 個々のアイテム間の距離 */
.ct_wrap_section2 + .ct_wrap_section2{
margin-top: 40px;
}
/* 画像 */
.ct_img_section2 {
position: relative;
width: 90%;
height: calc(194 * 100vw / 375);
background-repeat:  no-repeat;          
background-position:left top;
background-size:cover;
overflow: hidden;
}
.ct_wrap_section2.even .ct_img_section2{
left: 9%;
}

/* 画像以外 */
.ct_wrap_section2_txt{
position: relative;
top: -70px;
left: 9%;
padding: 30px 9.5% 45px;
width: 90%;
background-color: #FFFFFF;

}
.ct_wrap_section2.even .ct_wrap_section2_txt{
left: 0;
}

.ct_wrap_section2_txt .ct_txt_main_msg{
position: relative;
top: -20px;
right: -30px;
width: 100%;
text-align: right;
font-size: 3.2rem;
color: #D8D8D8;
}

.ct_wrap_section2_txt .ct_txt_title{
font-size: 1.8rem;
line-height: 233%;
font-weight: 500;
color: #1A1A1A;
}

.ct_wrap_section2_txt .ct_txt_descriotion{
margin-top: 17px;
font-size: 1.4rem;
line-height: 188%;
color: #606060;
}

.ct_wrap_section2_txt hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: 18px auto 9px;
    background-color: #E0E0E0;
    border: 0;
}

.ct_wrap_section2_txt .ct_txt_item_title{
font-size: 1.4rem;
font-weight: bold;
color: #606060;
margin-bottom: 5px;
}

.ct_wrap_section2_txt .ct_txt_techs{
font-size: 1.2rem;
line-height: 183%;
margin-left: 1em;
color: #666666;
}

.ct_txt_techs + .ct_txt_item_title {
margin-top: 22px;
}
.ct_wrap_section2_txt .ct_wrap_apply_items{
margin-top: 11px;
margin-left: 1em;
display: flex;
flex-wrap: wrap;
}

.ct_wrap_section2_txt .ct_box_apply_item{
font-size: 1.1rem;
padding: 4px 14px;
border: #B7B7B7 solid 1px;
border-radius: 17.5px;
margin-right: 4px;
margin-bottom: 6px;
}
}


/* =============================
セクション3
=============================*/


/* 英字 */
.ct_txt_description .ct_lang_eng {
line-height: 100%;
writing-mode:horizontal-tb
}
/*PC*/
@media screen and (min-width: 1025px) {
/* 領域設定 */
.ct_section3{
position: relative;
margin-top: 50px;
width: 100%;
overflow: hidden;
}
.sec3_img_area {
overflow: hidden;
width: 100%;
height: calc(990 * 100vw / 1440);
}
.sec3_img_area img {
position: relative;
bottom: 8%;
display: block;
width: 100%;
height: auto;
}

.ct_section3 .title.ct_fade_item{
transition: all ease-out 2s;
}
.ct_section3 .text1.ct_fade_item, 
.ct_section3 .text2.ct_fade_item,
.ct_section3 .text3.ct_fade_item,
.ct_section3 .text4.ct_fade_item{
transition: all ease-out 1s;
}
.ct_section3 .title.pc{
position: absolute;
left: calc(50% + 313px);
top: calc(208 * 100vw / 1440);
}
.ct_section3 .text1.pc{
position: absolute;
left: calc(50% + 101px);
top: calc(253 * 100vw / 1440);
}
.ct_section3 .text2.pc{
position: absolute;
left: calc(50% - 48px);
top: calc(253 * 100vw / 1440);
}
.ct_section3 .text3.pc{
position: absolute;
left: calc(50% - 304px);
top: calc(253 * 100vw / 1440);
}
.ct_section3 .text4.pc{
position: absolute;
left: calc(50% - 413px);
top: calc(253 * 100vw / 1440);
}
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
/* 領域設定 */
.ct_section3{
position: relative;
margin-top: 50px;
width: 100%;
height: calc(956 * 100vw / 1024);
overflow: hidden;
}
.sec3_img_area {
overflow: hidden;
width: 100%;
height: calc(956 * 100vw / 1024);
}
.sec3_img_area img {
position: relative;
bottom: -1%;
display: block;
width: 100%;
height: auto;
}

.ct_section3 .title.ct_fade_item{
transition: all ease-out 2s;
}
.ct_section3 .text1.ct_fade_item, 
.ct_section3 .text2.ct_fade_item,
.ct_section3 .text3.ct_fade_item,
.ct_section3 .text4.ct_fade_item{
transition: all ease-out 1s;
}
.ct_section3 .title.tb{
position: absolute;
left: calc(50% + 243px);
top: calc(241 * 100vw / 1024);
transform: scale(0.73);
transform-origin: center top;
}
.ct_section3 .text1.tb{
position: absolute;
left: calc(50% + 92px);
top: calc(245 * 100vw / 1024);
transform: scale(0.865);
}
.ct_section3 .text2.tb{
position: absolute;
left: calc(50% - 33px);
top: calc(245 * 100vw / 1024);
transform: scale(0.865);
}
.ct_section3 .text3.tb{
position: absolute;
left: calc(50% - 233px);
top: calc(240 * 100vw / 1024);
transform: scale(0.865);
}
.ct_section3 .text4.tb{
position: absolute;
left: calc(50% - 307px);
top: calc(241 * 100vw / 1024);
transform: scale(0.865);
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
/* 領域設定 */
.ct_section3{
position: relative;
width: 100%;
height: 1100px;
overflow: hidden;
}

.ct_section3 .title.ct_fade_item{
transition: all ease-out 2s;
z-index: 10;
}
.ct_section3 .text1.ct_fade_item, 
.ct_section3 .text2.ct_fade_item,
.ct_section3 .text3.ct_fade_item,
.ct_section3 .text4.ct_fade_item{
transition: all ease-out 1s;
z-index: 10;
}
/* 画像設定 */
.sec3_img_area {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 1100px;
}

/* 画像 */
.sec3_img_area img {
width: 100%;
height: auto;
position: relative;
display: block;
bottom: calc(2.2 * (100vw - 375px));
}

/* タイトル */
.ct_section3 .title.sp{
position: absolute;
left: 50%;
top: 83px;
transform: translateX(-50%) scale(0.733);
transform-origin: center top;

}

.ct_section3 .text1.sp{
position: absolute;
left: calc(50% - 146px);
top: 351px;
}
.ct_section3 .text2.sp{
position: absolute;
left: calc(50% - 146px);
top: 491px;
}
.ct_section3 .text3.sp{
position: absolute;
left: calc(50% - 146px);
top: 603px;
}
.ct_section3 .text4.sp{
position: absolute;
left: calc(50% - 146px);
top: 795px;
}
}

.ct_section3_photo{
display: flex;
width: 89%;
margin: auto;
margin-bottom: -60px;
cursor: pointer;
}
.ct_section3_btn-area{
width: 40%;
text-align: center;
padding-left: 9%;
}
.ct_section3_btn-area h3{
/* margin-top: 96px; */
margin-top: 24%;
margin-bottom: 31px;
font-size: 31px;
font-weight: 500;
color: #525252;
letter-spacing: 0.07em;
line-height: 160%;
}
.ct_section3_btn-area img{
padding-right: 16px;
width: 100px;
}
.ct_section3_btn-area p{
margin-top: 8px;
padding-right: 16px;
font-size: 16px;
color: #525252;
}
.ct_section3_photo-area{
width: 60%;
overflow: hidden;
margin-top: -56px;
position: relative;
z-index: 1;
}
.ct_section3_photo_img{
border: 2px solid #fff;
width: 100%;
position: relative;
}
.ct_section3_photo-area img{
display: block;
}
.ct_section3_photo:hover .ct_section3_btn-area img{
transform: scale(1.1);
}
.ct_section3_photo:hover .ct_section3_photo_img{
filter: brightness(1.2);
}
@media screen and (max-width: 1280px) {
.ct_section3_photo{
margin-bottom: 0;
}
}
/*タブレット*/
@media screen and (max-width: 1024px) {
.ct_section3_photo{
width: 100%;
flex-direction: column-reverse;
}
.ct_section3_btn-area{
width: 100%;
padding-left: 0;
}
.ct_section3_btn-area h3{
margin-top: -5px;
margin-bottom: 22px;
font-size: 31px;
text-indent: 1em;
letter-spacing: 0.07em;
line-height: 160%;
}
.ct_section3_btn-area img{
width: 64px;
padding-right: 0;
}
.ct_section3_btn-area p{
margin-top: 5px;
font-size: 16px;
color: #525252;
padding-right: 0;
}
.ct_section3_photo-area{
width: 82%;
margin-left: 18%;
overflow: hidden;
margin-top: -105px;
position: relative;
z-index: 1;
}
.ct_section3_photo_img{
border: 2px solid #fff;
width: 100%;
height: 51vw;
object-fit: cover;
object-position: center 10%;
}
.ct_section3_photo-area img{
display: block;
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
.ct_section3_btn-area h3{
margin-top: -5px;
margin-bottom: 22px;
font-size: 18px;
text-indent: 1em;
letter-spacing: 0.07em;
line-height: 160%;
}
.ct_section3_btn-area p{
margin-top: 5px;
font-size: 14px;
color: #525252;
}
.ct_section3_photo-area{
width: 90%;
margin-left: 10%;
overflow: hidden;
margin-top: -105px;
position: relative;
z-index: 1;
}
.ct_section3_photo_img{
    height: auto;
    object-fit: cover;
}
}
/* =============================
セクション4
=============================*/
/*PC*/
.ct_section4 {
background-color: #fff;
}
@media screen and (min-width: 1025px) {
/* 全体 */
.ct_section4 {
width: 100%;
margin: 0 auto;
padding-top: 95px;
}
/* 表示文言 */
.ct_section4 .ct_box_description {
color: #333333;
margin: 0 auto;
text-align: center;
}
/* タイトル部 */
.ct_section4 .ct_box_description .ct_txt_title {
font-size: 2.8rem;
font-weight: 500;
}
/* メッセージ部 */
.ct_section4 .ct_box_description .ct_txt_msg {
margin-top: 17px;
font-size: 1.8rem;
line-height: 183%;
font-weight: 500;
color: #606060;
}
/* 例示領域 */
.ct_section4 .ct_wrap_examples{
display: flex;
justify-content: center;
margin-top: 70px;
}
.ct_section4 .ct_wrap_examples a{
width: 50%;
}
/* 例 */
.ct_section4 .ct_wrap_example{
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
/* 例の画像 */
.ct_section4 .ct_wrap_example .ct_img_main {
object-fit: cover;
width: 100%;
height: 100%;
transition:ease-out .5s;
}

/* hover時に画像を拡大 */
.ct_section4 .ct_wrap_example:hover .ct_img_main {
transform: scale(1.06, 1.06);
}
/* 画像内に配置する部品 */
.ct_section4 .ct_wrap_example .ct_box_msg{
position: absolute;
top: 140px;
right: 50%;
margin: 0 auto;
text-align: center;
transform: translateX(50%);
font-weight: 500;
color: #FFFFFF;
width: 100%;
}
/* 表示文言 */
.ct_wrap_example .ct_txt_descriotion{
font-size: 1.8rem;
line-height: 189%;
}
/* タイトル */
.ct_wrap_example .ct_txt_title{
margin-top: 17px;
font-size: 3.2rem;
}
/* 詳細ボタン */
.ct_wrap_example .ct_btn_detail{
margin: 41px auto 0;
height: 67px;
width: 325px;
border: #BC3030 1px solid;
border-radius: 4px;
position: relative;
background-color: #FFFFFF;
box-sizing: border-box;

color: #BC3030;
display: flex;
align-items: center;
justify-content: center;
transition:ease-out .16s;
}
/* 詳細ボタン hover時 */
.ct_wrap_example:hover .ct_btn_detail{
border: #BC3030 1px solid;
background-color: #BC3030;
color: #FFFFFF;
}
}
/* 矢印の配置 */
.ct_wrap_example .ct_btn_detail img{
position: absolute;
right: 25px;
bottom: 40%;
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
/* 全体 */
.ct_section4 {
width: 100%;
margin: 132px auto 0;
padding-top: 84px;
}
/* 表示文言 */
.ct_section4 .ct_box_description {
color: #333333;
margin: 0 auto;
text-align: center;
}
/* タイトル部 */
.ct_section4 .ct_box_description .ct_txt_title {
font-size: 2.6rem;
font-weight: 500;
}
/* メッセージ部 */
.ct_section4 .ct_box_description .ct_txt_msg {
margin-top: 26px;
font-size: 1.6rem;
line-height: 175%;
font-weight: 500;
color: #606060;
}
/* 例示領域 */
.ct_section4 .ct_wrap_examples{
display: flex;
justify-content: space-between;
margin-top: 70px;
}
.ct_section4 .ct_wrap_examples a{
width: 50%;
}
/* 例 */
.ct_section4 .ct_wrap_example{
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
/* 例の画像 */
.ct_section4 .ct_wrap_example .ct_img_main {
object-fit: cover;
width: 100%;
height: 100%;
transition:ease-out .5s;
}

/* hover時に画像を拡大 */
.ct_section4 .ct_wrap_example:hover .ct_img_main {
transform: scale(1.06, 1.06);
}
/* 画像内に配置する部品 */
.ct_section4 .ct_wrap_example .ct_box_msg{
position: absolute;
bottom: 47px;
right: 50%;
margin: 0 auto;
text-align: center;
transform: translateX(50%);
font-weight: 500;
color: #FFFFFF;
}
/* 表示文言 */
.ct_wrap_example .ct_txt_descriotion{
font-size: 1.4rem;
line-height: 143%;
}
/* タイトル */
.ct_wrap_example .ct_txt_title{
margin-top: 10px;
font-size: 2.6rem;
line-height: 146%;
}
/* 詳細ボタン */
.ct_wrap_example .ct_btn_detail{
margin: 28px auto 0;
height: 51.5px;
width: 325px;
border: #BC3030 1px solid;
border-radius: 4px;

background-color: #FFFFFF;
box-sizing: border-box;
position: relative;
color: #BC3030;
font-size: 1.4rem;
line-height: 143%;

display: flex;
align-items: center;
justify-content: center;
transition:ease-out .16s;
}
/* 詳細ボタン hover時 */
.ct_wrap_example:hover .ct_btn_detail{
border: #BC3030 1px solid;
background-color: #BC3030;
color: #FFFFFF;
}
/* 矢印の配置 */
.ct_wrap_example .ct_btn_detail img{
bottom: 38%;
}
}


.ct_wrap_example .ct_btn_detail .ct_icon_arrow_white{
display: none;
}
.ct_wrap_example:hover .ct_btn_detail .ct_icon_arrow_white{
display: block;
}
.ct_wrap_example:hover .ct_btn_detail .ct_icon_arrow{
display: none;
}
/*スマホ*/
@media screen and (max-width: 767px) {
/* 全体 */
.ct_section4 {
width: 100%;
margin: 60px auto 0;
padding-top: 84px;
}
/* 表示文言 */
.ct_section4 .ct_box_description {
color: #333333;
margin: 0 auto;
text-align: center;
}
/* タイトル部 */
.ct_section4 .ct_box_description .ct_txt_title {
font-size: 2.2rem;
font-weight: 500;
}
/* メッセージ部 */
.ct_section4 .ct_box_description .ct_txt_msg {
margin-top: 15px;
font-size: 1.4rem;
line-height: 171%;
font-weight: 500;
letter-spacing: 0.3px;
color: #606060;
}
/* 例示領域 */
.ct_section4 .ct_wrap_examples{
display: block;
margin-top: 40px;
}

.ct_section4 .ct_wrap_examples a{
display: block;
margin-bottom: 3px;
}
/* 例 */
.ct_section4 .ct_wrap_example{
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
/* 例の画像 */
.ct_section4 .ct_wrap_example .ct_img_main {
object-fit: cover;
width: 100%;
height: 100%;
}

/* 画像内に配置する部品 */
.ct_section4 .ct_wrap_example .ct_box_msg{
position: absolute;
bottom: 15px;
right: 50%;
margin: 0 auto;
text-align: center;
transform: translateX(50%);
font-weight: 500;
color: #FFFFFF;
width: 100%;
}
/* 表示文言 */
.ct_wrap_example .ct_txt_descriotion{
font-size: 14px;
}
/* タイトル */
.ct_wrap_example .ct_txt_title{
margin-top: 5px;
font-size: 20px;
}
/* 詳細ボタン */
.ct_wrap_example .ct_btn_detail{
margin: 15px auto 0;
height: 47px;
width: 260px;
border: #BC3030 1px solid;
border-radius: 4px;
background-color: #FFFFFF;
box-sizing: border-box;
color: #BC3030;
font-size: 1.4rem;
line-height: 143%;
display: flex;
align-items: center;
justify-content: center;
transition:ease-out .16s;
position: relative;
}

.ct_wrap_example:hover .ct_btn_detail{
border: #BC3030 1px solid;
background-color: #BC3030;
color: #FFFFFF;
}
/* 矢印の配置 */
.ct_wrap_example .ct_btn_detail img{
position: absolute;
right: 16px;
bottom: 17px;
}
}
/* 下付き文字 */
.trademark {
bottom: -.5em;
}



/* =============================
フッター
=============================*/
/*PC*/
@media screen and (min-width: 1025px) {
.ct_footer{
width: 100%;
background-color: #333333;
height: 94px;
line-height: 587%;
}
.ct_txt_logo{
margin-right: 5.6%;
text-align: right;
color: #FFFFFF;
}
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
.ct_footer{
width: 100%;
background-color: #333333;
height: 94px;
line-height: 587%;
}
.ct_txt_logo{
margin-right: 5.6%;
text-align: right;
color: #FFFFFF;
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
.ct_footer{
width: 100%;
margin-top: 68px;
font-size: 1.6rem;
font-weight: 500;
}
.ct_box_main_item{
position: relative;
background-color: #BC3030;
color: #FFFFFF;
text-align: center;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: #E0E0E0 1px solid;
}
.ct_box_main_item img{
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
}
.ct_box_footer_item{
position: relative;
background-color: #5C5C5C;
color: #FFFFFF;
text-align: left;
height: 45px;
display: flex;
align-items: center;
padding-left: 10px;
border-bottom: #E0E0E0 1px solid;
}
.ct_box_footer_item img{
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%) rotate(180deg);
}
.ct_footer .ct_box_btn_area{
background-color: #F2F2F2;
text-align: left;
height: 45px;
}
.ct_footer .ct_box_backtop{
background-color: #FFFFFF;
height: 45px;
display: flex;
align-items: center;
justify-content: end;
padding-right: 20px;
border-bottom: #5C5C5C 1px solid;
font-size: 1.2rem;
}
.ct_color_red{
color: #E02900;
}
.ct_footer .ct_box_view_mode{
background-color: #FFFFFF;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}

.ct_footer .ct_box_last_part{
background-color: #C5C5C5;
padding: 20px;
}
.ct_box_last_part .ct_txt_item{
font-size: 1.2rem;
}
.ct_box_last_part .ct_txt_item .ct_style_emphasis{
font-size: 1.4rem;
}
.ct_box_last_part .ct_txt_item + .ct_txt_item{
margin-top: 20px;
}
}

.pt-globalHeader_hamburger {
position: absolute;
top: 53px;
right: 10px;
width: 116px;
height: 36px;
margin-top: 8px;
-webkit-transition: border-left-color .3s cubic-bezier(.25, .25, .75, .75);
transition: border-left-color .3s cubic-bezier(.25, .25, .75, .75);
z-index: 10000;
transition: opacity .2s ease-out;
opacity: 1;
}
.is-scroll .pt-globalHeader_hamburger {
opacity: 0;
}
.is-show .pt-globalHeader_hamburger {
position: fixed;
opacity: 1;
}
.pt-globalHeader_hamburger_title {
overflow: hidden;
width: 41px;
height: 10px;
margin: 13px 0 0 20px;
-webkit-transition: background-image .3s cubic-bezier(.25, .25, .75, .75);
transition: background-image .3s cubic-bezier(.25, .25, .75, .75);
text-indent: -9999px;
background: url(https://www.mitsubishielectric.co.jp/ldg/ja/img/top/header/title_hdr_menu.png) 0 0 no-repeat;
}
.is-scroll.show .pt-globalHeader_hamburger_title {
background: url(/ldg/ja/information/ieq/img/title_hdr_menu_wht.png) 0 0 no-repeat;
}
.pt-globalHeader_hamburger_icon {
position: absolute;
top: -4px;
right: 0;
}
.pt-globalHeader_hamburger_icon .menu-trigger {
position: relative;
display: inline-block;
box-sizing: border-box;
width: 42px;
height: 42px;
-webkit-transition: all .4s;
transition: all .4s;
border-radius: 50%;
background-color: #f2f1ee;
}
.pt-globalHeader_hamburger_icon .menu-trigger span {
position: absolute;
display: inline-block;
box-sizing: border-box;
height: 2px;
-webkit-transition: all .4s;
transition: all .4s;
background-color: #d50000;
}
.pt-globalHeader_hamburger_icon .menu-trigger span:nth-of-type(1) {
top: 15px;
left: 12px;
width: 18px;
}
.pt-globalHeader_hamburger_icon .menu-trigger span:nth-of-type(2) {
top: 20px;
left: 14px;
width: 14px;
}
.pt-globalHeader_hamburger_icon .menu-trigger span:nth-of-type(3) {
top: 25px;
left: 12px;
width: 18px;
}

.pt-globalHeader_hamburger_icon .menu-trigger.is-close span:nth-of-type(1) {
-webkit-transform: translateY(5px) rotate(-45deg);
-ms-transform: translateY(5px) rotate(-45deg);
transform: translateY(5px) rotate(-45deg);
}
.pt-globalHeader_hamburger_icon .menu-trigger.is-close span:nth-of-type(2) {
opacity: 0;
}
.pt-globalHeader_hamburger_icon .menu-trigger.is-close span:nth-of-type(3) {
-webkit-transform: translateY(-5px) rotate(45deg);
-ms-transform: translateY(-5px) rotate(45deg);
transform: translateY(-5px) rotate(45deg);
}

/* ハンバーガーメニュー */
.menu_wrapper{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
overscroll-behavior: contain;
overflow-y: scroll;
touch-action: none;
scrollbar-width: none;
-ms-overflow-style: none;
}
.menu_wrapper.show{
pointer-events:inherit;
}
.menu_wrapper::before {
content: "";
width: 100vw;
height: calc(100vh + 1px);
display: flex;
position: relative;
left: 0;
top: 0;
margin-bottom: calc(-100vh - 1px);
}
.menu_wrapper::-webkit-scrollbar {
display: none;
}

.menu_content{
background-color: rgba(51,51,51,0.9);
width: 50%;
min-width: 540px;
transform: translateX(100%);
margin-right: 0;
margin-left: auto;
min-height: calc(100vh + 1px);
padding-right: 0;
}
.menu_wrapper.show .menu_content{
transform: translateX(0);
}
.menu_content::-webkit-scrollbar {
display: block;
scrollbar-width: inherit;
-ms-overflow-style: inherit;
}

.menu_content nav{
width: 480px;
margin: auto;
padding-top: 215px;
position: relative;
}
.menu-list{
padding-bottom: 43px;
}
.menu-list > p{
font-size: 18px;
color: #fff;
margin-bottom: 17px;
}
.menu-list a{
display: flex;
margin-bottom: 3px;
height: 117px;
}
.menu-list__img{
width: 202px;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.menu-list__img img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: ease-out .3s;
}
.menu-list__text{
background-color: #fff;
display: flex;
align-items: center;
width: 278px;
}
.menu-list__text p{
font-size: 17px;
padding-left: 38px;
font-weight: 500;
width: 100%;
position: relative;
color: #333333;
}
.menu-list__text p:after{
position: absolute;
content: '';
width: 9px;
height: 9px;
border-top: 2px solid #BC3030;
border-right: 2px solid #BC3030;
top: 50%;
transform: translateY(-50%) rotate(45deg);
right: 25px;
transition: .3s ease-out;
}
.menu-list a:hover .menu-list__img img{
transform: scale(1.06, 1.06);
}
.menu-list a:hover .menu-list__text p:after{
right: 20px;
}
.sp_nav{
display: none;
}
@media screen and (max-width: 1100px) {
.menu_content nav{
left: 0;
}
}
@media screen and (max-height: 750px) {
.menu_content nav{
padding-top: 181px;
}
.menu-list > p{
font-size: 16px;
}
.menu-list a{
height: 94px;
}
.menu-list__text p{
font-size: 14px;
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
.pt-globalHeader_hamburger {
display: none;
}
.menu_wrapper{
top: 0;
height: 100%;
}
.menu_content{
width: 100%;
min-width: auto;
}
.menu_content nav{
width: 362px;
left: 0;
padding-top: 181px;
}
.menu-list > p{
font-size: 16px;
}
.menu-list a{
height: 94px;
}
.menu-list__img{
width: 125px;
}
.menu-list__text{
width: 237px;
}
.menu-list__text p{
padding-left: 20px;
font-size: 14px;
}
.menu-list__text p:after{
right: 10px;
}
.sp_nav{
display: block;
float: right;
margin: 5px 0 0;
padding-right: 5px;
position: absolute;
top: -3px;
right: 0;
z-index: 10000;
}
.sp_nav li{
float: left;
width: 40px;
}
.sp_nav li a{
display: block;
height: 44px;
}
.sp_nav .nav a{
background-position: -265px 11px;
}
.sp_nav li a{
background: url(https://www.mitsubishielectric.co.jp/shared_sp/v0003/img/header.png) no-repeat 0 0;
background-size: 300px;
text-indent: -9999px;
outline: 0;
}
.menu-list a:hover .menu-list__text p:after{
right: 8px;
}
}
@media screen and (max-width: 375px) {
.menu_content nav{
width: 325px;
}
.menu-list__text{
width: 200px;
}
}
@media screen and (max-height: 600px) {
.menu_content nav{
padding-top: 131px;
}
}
@media screen and (max-height: 570px) {
.menu_content nav{
padding-top: 110px;
}
.menu-list a{
height: 84px;
}
}


/* =============================
ポップアップ動画
=============================*/
.popup{
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 10000;
    transition: ease-in-out .3s;
}
.popup.is-show{
    opacity: 1;
    visibility: visible;
}
.bg-black{
    width: 100%;
    height: 100vh;
    background: rgb(0, 0, 0, 0.8);
    z-index: 1;
}
.close-btn{
    position: relative;
    padding: 20px;
    transform: translateX(20px);
    width: fit-content;
    margin: auto 0 auto auto;
}
.close-btn p{
    width: fit-content;
    color: #fff;
    cursor: pointer;
    font-size: 1.6rem;
}
.close-btn p::before{
    content: "";
    width: 15px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 32px;
    transform: rotate(45deg);
}
.close-btn p::after{
    content: "";
    width: 15px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 32px;
    transform: rotate(-45deg);
}
.screen{
    width: auto;
    height: fit-content;
    /* margin: auto; */
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
    transform: translate(-50%,-50%);
    z-index: 2;
}
.player{
    display: none;
    opacity: 0;
    transition: ease-in-out .3s;
}
.popup.is-show .player{
    opacity: 1;
    display: block;
}
video-js.video-js.vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 56.25%;
}
/*タブレット*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
.screen{
width: 80%;
transform: translate(-50%,-50%);
}
}
/*スマホ*/
@media screen and (max-width: 767px) {
.close-btn p{
font-size: 1.2rem;
}
.screen{
width: 100%;
height: auto;
transform: translate(-50%,-50%);
}
.close-btn p::before{
top: 28px;
}
.close-btn p::after{
top: 28px;
}
.close-btn{
position: relative;
padding: 20px 20px 10px 20px;
transform: translateX(10px);
width: fit-content;
margin: auto 0 auto auto;
}
video-js.video-js.vjs-fluid:not(.vjs-audio-only-mode) {
padding-top: 56.25%;
}
}