@charset "utf-8";

.fmenu_sp li a.sp_message:link span { color:#00E0E0; }
.fmenu_sp li a.sp_message:link em { color:#00E0E0; }
.fmenu_sp li a.sp_message:visited span { color:#00E0E0; }
.fmenu_sp li a.sp_message:visited em { color:#00E0E0; }

#g-nav.panelactive ul li a.a_message:link span { color:#FFFF02;}
#g-nav.panelactive ul li a.a_message:visited span { color:#FFFF02;}
footer a.f_message:link::after {
    content: ''; /* コンテンツを空にする */
    position: absolute; /* 絶対位置指定 */
    bottom:10px;
    left: 50%; /* 左端から中央に配置 */
    transform: translate(-50%, -50%); /* 中央揃え */
    width:50px; /* 要素の幅と同じ */
    height:20px; /* 要素の高さと同じ */
    background-image: url('../../img/color.png');
    background-size: contain; /* 画像を要素に合わせて表示 */
    opacity: 1; /* 初期状態は不透明 */
    transition: opacity 0.3s ease; /* フェードのアニメーション */
    margin:0 auto; 
  }

#g-nav-list ul li a.a_works { }
#g-nav-list ul li a.a_works strong { }
#g-nav-list ul li a.a_works:link { }
#g-nav-list ul li a.a_works span.btnarrow::before{content: '';position: absolute;bottom:-8px;left:15%; width: 85%; height: 1px;  }
#g-nav-list ul li a.a_works span.btnarrow::afer{content: '';position: absolute;bottom:-3px;right:0;width: 15px;height:1px;transform: rotate(35deg);}
.fmenu_sp .sp_works:link em {} 
.fmenu_sp .sp_works:link span {} 
.fmenu_sp .sp_works:visited em {} 
.fmenu_sp .sp_works:visited span {} 
.fmenu_sp li a.sp_works img {}  

.inlin_pc { display:none; } 
.inlin_sp { display:block; } 
@media screen and (min-width: 840px) {
    .inlin_pc { display:block; } 
    .inlin_sp { display:none; } 
    #text-container strong.josefin-sans .fade-in { margin: -6px; }
    #text-container span.japan { margin-top:-210px; }
    
}

/* 共通 */
.contents { text-align:center; padding:30px 0; }
.contents img { max-width:100%; max-height:100%; height:auto; }
.mask-wrap .mask { margin-bottom:-10px; }
h3 { margin-bottom:10px; } 
h3::before { content: '●'; color:#00E0E0; display:inline-block; width:1em; margin-right: 0.5em; }

@media screen and (min-width: 840px) {
    .contents { padding:80px 0; }
}

/*トップ*/
.top { max-width:1400px; }
.ul_top li.li_photo { margin-top:10px; position:relative; overflow:visible;}

.div_info { width:100%; background:#00E0E0; color:#000; padding:10px; text-align:left; }
@media screen and (min-width:320px) {
    .div_info { padding:30px; }
    .div_info span { font-size:16px; width:100%; display:inline-block; }
    .div_info em { font-size:18px; font-style:normal;  width:100%; display:inline-block; font-weight:bold; }
    .div_info em small { font-size:14px; }
    .div_info strong { width:100%; font-size:18px; line-height:1.7em; margin-bottom:20px; display:inline-block; }
}

@media screen and (min-width:375px) {
    .div_info strong { font-size:20px;  }
}

@media screen and (min-width:414px) {
    .div_info strong { font-size:25px; }
}

@media screen and (min-width: 840px) {
    .ul_top li.li_photo .mask-wrap { width:100%; }
    .ul_top li.li_photo { overflow:visible; }
    .ul_top li.li_photo .div_info { width:440px; position:absolute; bottom:-5vw; left:-50px; }
    
}



.img_back { width:100%; }
.top_wrap { padding-bottom:30px; }
.ul_top li.li_photo p { width:90%; margin: 0 auto; margin-top:15px; text-align: left; }

/* トップの下共通 */
.company_wrap_gray { width: 100%; background:#f7f7f7; }
.company_wrap_gray h3 { text-align:left; }
.companyContentsText  { text-align:left; }
.companyContentsImg li img { max-width:100%; max-height:100%; height:auto; width:auto; }
.companyContentsImg li:first-child { margin-bottom: 10px; }

.p_message { font-size:16px; line-height:1.7em; font-weight:bold; text-align:left; }
.p_message.second { margin-top:50px; }
@media screen and (min-width: 840px) {
    .p_message { font-size:18px; font-weight:bold; text-align:left; }
    .p_message.second { margin-top:0px; }
}

@media screen and (min-width: 840px) {
    .worksContents { width:100%; display:flex; justify-content: space-between; margin-bottom:100px; }
    .worksContents li:nth-child(1) { width:40%; text-align:left; overflow:hidden; }
    .worksContents li:nth-child(1) img { width:100%; }
    .worksContents li:nth-child(2) { width:55%; text-align:left; }
    .worksContents li img { width:90%; }
    .worksContents li:nth-child(2) strong { font-size:28px; letter-spacing:0.05em; line-height:50px; }

}

@media screen and (min-width: 840px) {
.company { max-width:1400px; margin-top:10vw; }
.company .p_message { margin-left:5%;}
.contents p.p_message {  margin-bottom:50px; }
}

.st_last { width:100%; text-align:left; margin-bottom:100px; display:block; font-size:18px; font-weight:bold; }
@media screen and (min-width: 840px) {
    .st_last { font-size:28px; margin-bottom:50px; }
}