/*====================================
base.cssの上書き用
====================================*/

* + p {
margin-top: 0;
}


body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
ul,
ol,
dl,
dt,
dd,
li,
td,
th,
input,
figure,
textarea,
select,
button {
margin: 0;
padding: 0;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size: 1.4rem;
line-height: 1.6;
}

/* pc */
html:not(.sp):not(.tablet) #content{
padding-bottom: 90px;
}

/* sp */
.sp #content{
padding-bottom: 120px;
}

.font_real{
font-family: ff-real-headline-pro, sans-serif;
font-weight: 600;
font-style: normal;
}

/**************************************************
css-animate
**************************************************/

.css-animate {
opacity: 0;
animation-duration: 0.75s;
animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(64px);
transform: translateY(64px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(64px);
transform: translateY(64px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

.css-animate--fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}

@-webkit-keyframes scaleIn {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}

@keyframes scaleIn {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}

.css-animate--scaleIn {
-webkit-animation-name: scaleIn;
animation-name: scaleIn;
}



/**************************************************
header
**************************************************/
html:not(.sp) #wrap {
margin-top: 0;
}
html:not(.sp) #header .header_inner-main {
transition: background-color 0.2s ease;
background-color: rgba(255,255,255,0);
}
#header .header_site_logo{
background: url(/common/images/logo_w.png) center no-repeat;
background-size: 100% 100%;
}
#header .header_site_logo img{
opacity: 0;
}
#header.subOpen .header_site_logo img,
#header.black .header_site_logo img{
opacity: 1;
}
#header .header_block {
border: none;
}
#header .header_pcMenu_mainMenu a,
#header .header_pcMenu_mainMenu span{
transition: color 0.2s ease;
color: #FFF;
}
#header .header_pcMenu_lang li{
transition: color 0.2s ease;
color: #FFF;
}

#header .header_pcMenu_mail .icon svg{
fill: #FFF;
}
#header .header_pcMenu_mail a{
color: #FFF;
}
#header .header_pcMenu_catalog .icon svg{
fill: #FFF;
}
#header .header_pcMenu_catalog a{
color: #FFF;
}
#header .header_pcMenu_search .icon svg{
fill: #FFF;
}

html.sp #header.header {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
html.sp #header .header_site_logo img{
opacity: 0;
}
html.sp #header .header_spMenu_btn{
background: url(/common/images/header_spmenu_btn_open_white.png) center no-repeat;
background-size: 28px;
}
html.sp #header .header_spMenu_btn img{
opacity: 0;
}


html:not(.sp) #header.black .header_pcMenu_mainMenu a,
html:not(.sp) #header.black .header_pcMenu_mainMenu span,
html:not(.sp) #header.subOpen .header_pcMenu_mainMenu a,
html:not(.sp) #header.subOpen .header_pcMenu_mainMenu span{
color: #1a1a1a;
}

html:not(.sp) #header.black #header .header_pcMenu_lang li,
html:not(.sp) #header.subOpen #header .header_pcMenu_lang li{
color: #1a1a1a;
}
html:not(.sp) #header.black .header_pcMenu_mail a,
html:not(.sp) #header.black .header_pcMenu_catalog a,
html:not(.sp) #header.subOpen .header_pcMenu_mail a,
html:not(.sp) #header.subOpen .header_pcMenu_catalog a{
color: #1a1a1a;
}
html:not(.sp) #header.black .header_pcMenu_mail .icon svg,
html:not(.sp) #header.black .header_pcMenu_catalog .icon svg,
html:not(.sp) #header.subOpen .header_pcMenu_mail .icon svg,
html:not(.sp) #header.subOpen .header_pcMenu_catalog .icon svg{
fill: #1a1a1a;
}
html:not(.sp) #header.black .header_pcMenu_lang li,
html:not(.sp) #header.subOpen .header_pcMenu_lang li{
color: #1a1a1a;
}
html:not(.sp) #header.black .header_pcMenu_search .icon svg,
html:not(.sp) #header.subOpen .header_pcMenu_search .icon svg{
fill: #1a1a1a;
}

html:not(.sp) #header.black .header_pcMenu_mail a:hover,
html:not(.sp) #header.black .header_pcMenu_catalog a:hover,
html:not(.sp) #header.black .header_pcMenu_mail a:hover .icon svg,
html:not(.sp) #header.black .header_pcMenu_catalog a:hover .icon svg,
html:not(.sp) #header.black .header_pcMenu_search .icon:hover svg{
fill: #027fea;
color: #027fea;
}
html:not(.sp) #header.black .header_inner-main,
html:not(.sp) #header.subOpen .header_inner-main{
background-color: rgba(255,255,255,1);
}


/**************************************************
main
**************************************************/
#mv {
position: relative;
overflow: hidden;
}
#mv:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: transparent;
}
#mv.anchor{
cursor: pointer;
}
#mv .img{
width: 100%;
height: 0;
padding-top: 56.25%;
overflow: hidden;
background: #000;
}
#mv .img img{
width: 100%;
}
#mv .slide{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
#mv .slide a{
    display: block;
}
#mv .mv_ttl{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 1100px;
width: 100%;
height: 100%;
margin: auto;
z-index: 1;
overflow: hidden;
}
#mv .mv_ttl .mv_ttl_inner{
display: flex;
align-items: center;
flex-wrap: wrap;
height: 100%;
}
#mv .mv_ttl .slide{
display: flex;
align-items: center;
}
#mv .mv_ttl .slide div{
width: 100%;
}
#mv .mv_ttl .slide .slick-slide{
outline: none;
}
#mv .mv_ttl .ttl{
font-size: 98px;
line-height: 1;
color: #FFF;
}
#mv .mv_ttl .txt{
font-size: 20px;
color: #FFF;
}
#mv .movie > div{
position: relative;
padding-top: 56.25%;
}
#mv .movie iframe{
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
width: 121.16%;
height: 121.16%;
}


.sp #mv .img{
padding-top: 117.3333%;
}
.sp #mv .movie > div {
padding-top: 117.3333%;
}
.sp #mv .movie iframe{
width: 208.718%;
height: 208.718%;
}
.sp #mv .movie img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.sp #mv .mv_ttl{
left: 15px;
right: 15px;
width: auto;
}
.sp #mv .mv_ttl .ttl{
font-size: 35px;
}
.sp #mv .mv_ttl .txt{
font-size: 15px;
}


/**************************************************
products
**************************************************/
.products{
background: #00205b;
}
.products .products_wrap{
padding: 0 15px;
max-width: 1100px;
margin: auto;
}
.products .products_inner{
padding: 7% 0;
}
.products_notice_text {
border-bottom: 1px solid #ffffff24;
padding: 0.7em 0;
opacity: 1.0;
}
.products_notice_text .txt {
max-width: 1100px;
margin: auto;
}
html.sp .products_notice_text .txt {
text-align: center
}
.products .products_notice_text .txt a {
color: #fff;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: middle;
}
.products .products_notice_text .txt a:before {
display: inline-block;
content: "";
margin-top: -3px;
vertical-align: middle;
width: 7px;
height: 7px;
margin-right: 8px;
border-top: solid 1px transparent;
border-right: solid 1px transparent;
transform: rotate(45deg);
border-color: #fff;
}
html.sp .products .products_notice_text .txt a:before {
margin-top: -1px;
vertical-align: baseline;
}
.products .products_notice_text .txt span{
color: #fff;
padding-left: 15px;
opacity: 0.6;
}
html.sp .products .products_notice_text .txt a span{
padding-left: 0;
}
.products .ttl p{
color: #FFF;
font-size: 28px;
text-align: center;
}
.products .list{
margin-top: 3%;
}
.products .list ul{
display: flex;
justify-content: space-between;
}
.products .list li{
flex-basis: 9.45%;
}
.products .list a{
display: block;
position: relative;
padding-bottom: 0.5em;
color: #FFF;
text-align: center;
white-space: nowrap;
}
.products .list .icon{
position: relative;
height: 0;
padding-top: 100%;
border-radius: 1000px;
}
.products .list figure{
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.products .list svg{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 59px;
height: 59px;
margin: auto;
fill: #FFF;
}
.products .list p{
transform: translateX(-50%);
position: absolute;
bottom: 0;
left: 50%;
margin: auto;
}

.sp .products .products_inner{
padding: 20% 0;
}
.sp .products .ttl p{
font-size: 23px;
}
.sp .products .list{
width: 72%;
margin: auto;
}
.sp .products .list ul{
flex-wrap: wrap;
margin-top: 15.5%;
}
.sp .products .list li{
flex-basis: 38%;
}
.sp .products .list li:nth-of-type(n + 3){
margin-top: 9.5%;
}
.sp .products .list a{
padding-bottom: 2.5em;
}


/**************************************************
topix
**************************************************/
.topix {
position: relative;
padding: 0 15px;
background-color: #f5f5f5;
}
.topix .topix_wrap{
max-width: 1100px;
margin: auto;
}
.topix .topix_inner {
padding: 8% 0 8% 0;
}
.topix .topix_ttl > *{
font-size: 28px;
text-align: center;
}
.topix .topix_list{
margin-top: 7%;
}
.topix .topix_list .flex{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.topix .topix_list{
overflow: hidden;
}
.topix .topix_list.acd{
transition: height 0.5s ease;
}
.topix .topix_list .photobox{
width: calc((100% - 34px) / 3);
max-width: 355px;
margin: 0 0 30px 17px;
background-color: #fff;
position: relative;
}
.topix .topix_list .photobox:nth-of-type(3n + 1){
margin-left: 0;
}
.topix .topix_list .photobox a {
text-decoration: none;
color: #1a1a1a;
}
.topix .topix_list .photobox .photo{
position: relative;
height: 0;
padding-top: 60.8451%;
overflow: hidden;
}
.topix .topix_list .photobox .photo img {
transition: 0.5s;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
backface-visibility: hidden;
}
html:not(.sp) .topix .topix_list .photobox .photo img:hover {
transform: scale(1.1, 1.1);
}
.topix .topix_list .info {
display: flex;
flex-direction: column;
padding: 20px 25px;
box-sizing: border-box;
}
.topix .topix_list .category{
font-size: 12px;
color: #00205b;
font-weight: bold;
}
.topix .topix_list .ttl {
margin-top: 0.25em;
font-size: 20px;
font-weight: bold;
}
.topix .topix_list .text {
margin-top: 0.75em;
font-size: 14px;
color: #666666;
}
.topix .more{
display: flex;
justify-content: center;
margin-top: 5%;
}
.topix .more p{
font-size: 16px;
}
.topix .more .open{
display: block;
}
.topix .more .close{
display: none;
}
.topix .more a{
position: relative;
display: inline-block;
padding-right: 15px;
color: #1a1a1a;
font-weight: bold;
text-decoration: none;
}
.topix .more a:after{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0.5em;
height: 0.5em;
margin: auto;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.topix .more a:after{
top: -0.33em;
transform: rotate(45deg);
}
.topix .more.op a:after{
top: 0.33em;
transform: rotate(-135deg);
}
.topix .more.op .open{
display: none;
}
.topix .more.op .close{
display: block;
}

.sp .topix .topix_inner {
width: 100%;
padding: 20% 0 20% 0;
}
.sp .topix .topix_ttl > *{
font-size: 23px;
}
.sp .topix .topix_list .photobox {
display: flex;
flex-direction: column;
margin: 0 1.5rem 1.5rem 1.5rem;
width: 100%;
max-width: 100%;
}
.sp .topix .topix_list .info {
padding: 13px 17px;
}
.sp .topix .topix_list .category{
font-size: 11px;
}
.sp .topix .topix_list .ttl{
font-size: 16px;
}
.sp .topix .topix_list .text{
font-size: 13px;
}
.sp .topix .more{
margin-top: 8%;
}

/*===========================================
news
===========================================*/
#news {
max-width: 1100px;
margin: auto;
padding-top: 90px;
box-sizing: border-box;
}

#news .inner {
margin: auto;
padding: 60px 20px 75px 20px;
}

#news .news_wrap:after {
content: '';
display: block;
clear: both;
}

#news .news_column {
width: 46.5%;
}

#news .news_column:nth-of-type(odd) {
float: left;
}

#news .news_column:nth-of-type(even) {
float: right;
}

#news .ttl,
#news .main_ttl {
font-weight: bold;
font-size: 30px;
text-align: center;
color: #1a1a1a;
}
html:not(.sp) #news .main_ttl {
width: 1020px;  /* テキスト位置調整のため */
}

#news .news_column .ttl {
font-size: 24px;
text-align: left;
}

#news .news_list {
margin-top: 2em;
}

#news .news_list ul {
height: 22em;
padding-right: 3em;
overflow-y: auto;
}

#news .news_list li + li {
margin-top: 2em;
}

#news .news_list .icon {
display: inline-block;
box-sizing: border-box;
min-width: 8.25em;
margin: 0 1em 0 0;
padding: 1px 5px 0px 5px;
font-size: 11px;
line-height: 16px;
white-space: nowrap;
text-align: center;
background-color: #e6e6e6;
}

#news .news_list .date {
display: inline-block;
margin: 0;
color: #808080;
white-space: nowrap;
}

#news .news_list ul::-webkit-scrollbar {
width: 3px;
}

#news .news_list ul::-webkit-scrollbar-track {
background-color: #e6e6e6;
}

#news .news_list ul::-webkit-scrollbar-thumb {
background-color: #999;
}

#news .news_list .txt {
margin: 0.5em 0 0 0;
}

#news .news_list .txt a {
color: #1a1a1a;
text-decoration: none;
}

#news .news_list .txt a:hover {
text-decoration: underline;
}

#news .more {
margin: 2em 0 0 0;
}

#news .more li {
display: inline-block;
}

#news .more li + li:before {
content: '|';
margin: 0 1em;
}

#news .more a {
color: #027fea;
text-decoration: none;
}
#news .more a:hover {
text-decoration: underline;
}

#news .newsMoreBtn a:hover span{
border-bottom: solid 1px #027fea;
}
#news .newsMoreBtn a{
display: table;
margin: 0 auto;
text-align: center;
font-size: 20px;
text-decoration: none;
color: #027fea;
}

.sp #news {
padding-top: 2em;
}

.sp #news .inner {
padding: 2em 15px 3em 15px;
}

.sp #news .main_ttl {
font-size: 23px;
}

.sp #news .news_column {
float: none;
width: auto;
}

.sp #news .news_column + .news_column {
margin-top: 3em;
}

.sp #news .news_column .ttl {
font-size: 18px;
text-align: center;
}

.sp #news .news_list {
margin-top: 3em;
}

.sp #news .news_list ul {
height: 16em;
padding-right: 1em;
}

.sp #news .news_list li + li {
margin-top: 1em;
}

.sp #news .more {
text-align: center;
margin-top: 2.5em;
}

.sp #news .more > p {
min-width: 15em;
}

.sp #news .newsMoreBtn{
width: 98%;
margin: 0 auto;
}
.sp #news .newsMoreBtn a{
display: block;
text-align: center;
padding: 20px 0 30px;
font-size: 20px;
text-decoration: none;
color: #027fea;
}

/*===========================================
contact
===========================================*/
.contact{
max-width: 1100px;
margin: auto;
}
.contact .contact_inner{
max-width: 1000px;
margin: 9% auto 0 auto;
}
.contact .main_ttl{
margin-top: 7%;
font-size: 30px;
font-weight: bold;
text-align: center;
}
.contact .contact_btn{
margin-top: 6%;
}
.contact .contact_btn ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact .contact_btn li{
flex-basis: 49%;
}
.contact .contact_btn a{
display: block;
position: relative;
padding: 1.9em 0;
font-size: 24px;
font-weight: bold;
color: #333;
text-align: center;
text-decoration: none;
background: #f5f5f5;
}
.contact .contact_btn a:before,
.contact .contact_btn a:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
background: center no-repeat;
background-size: contain;
}
.contact .contact_btn .faq a:before{
left: 7.4%;
width: 16.48%;
}
.contact .contact_btn svg{
position: absolute;
top: 0;
bottom: 0;
left: 7.4%;
margin: auto;
width: 85px;
height: 85px;
}
.contact .contact_btn .catalog a:before{
left: 7.4%;
width: 15.93%;
}
.contact .contact_btn a:after{
transition: transform 0.3s ease;
transform: translateX(0px);
right: 40px;
width: 27px;
background-image: url(/images/contact_icon_arrow.svg);
background-size: 25px;
}
.contact .contact_btn a:hover:after{
transform: translateX(8px);
}
.contact .contact_link{
margin-top: 5%;
}
.contact .contact_link p{
text-align: center;
}
.contact .contact_link a{
font-size: 1.5rem;
color: #027fea;
text-decoration: none;
}

.sp .contact .contact_inner{
padding: 0 15px;
}
.sp .contact .main_ttl{
font-size: 23px;
}
.sp .contact .contact_btn li{
flex-basis: 100%;
}
.sp .contact .contact_btn li + li{
margin-top: 10px;
}
.sp .contact .contact_btn a{
font-size: 18px;
}
.sp .contact .contact_link{
margin-top: 8%;
}
.sp .contact .contact_btn a:after{
right: 20px;
}
.sp .contact .contact_btn svg{
width: 16.48%;
}

/*===========================================
SNS
===========================================*/
.sns{
max-width: 1100px;
margin: auto;
}
.sns .sns_inner{
max-width: 1000px;
margin: 15% auto 0 auto;
}
.sns .main_ttl{
font-size: 30px;
font-weight: bold;
text-align: center;
}
.sns .sns_btn{
width: 82%;
margin: 8% auto 0 auto;
}
.sns .sns_btn ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sns .sns_btn a{
display: block;
position: relative;
padding: 2em 0 2em 80px;
color: #333;
font-weight: bold;
text-decoration: none;
}
.sns .sns_btn a:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 62px;
height: 62px;
margin: auto;
background: center no-repeat;
background-size: contain;
}
.sns .sns_btn .fb a:before{
background-image: url(/images/sns_icon_fb.png);
}
.sns .sns_btn .yt a:before{
background-image: url(/images/sns_icon_yt.png);
}
.sns .sns_btn .ig a:before{
background-image: url(/images/sns_icon_ig.png);
}
.sns .sns_btn .tw a:before{
background-image: url(/images/sns_icon_tw.png);
}

.sp .sns .sns_inner{
padding: 0 15px;
}
.sp .sns .main_ttl{
font-size: 23px;
}
.sp .sns .sns_btn{
width: 90%;
}
.sp .sns .sns_btn li{
flex-basis: 48%;
}
.sp .sns .sns_btn li:nth-of-type(n + 3){
margin-top: 8%;
}

.sp .sns .sns_btn a{
padding: 0;
font-size: 16px;
text-align: center;
}
.sp .sns .sns_btn a:before {
position: static;
width: 18.67vw;
height: 18.67vw;
margin-bottom: 0.75em;
}

/*===========================================
sds
===========================================*/
.sds{
max-width: 1100px;
margin: auto;
}
.sds .sds_inner{
box-sizing: border-box;
max-width: 1000px;
margin: 16% auto 0 auto;
border: 6px solid #f5f5f5;
padding: 5% 10%;
}
.sds .ttl{
padding-top: 90px;
font-size: 24px;
font-weight: bold;
text-align: center;
background: url(/images/sds_icon_sheet.png) top center no-repeat;
background-size: 60px;
}
.sds .txt{
margin-top: 1.5em;
text-align: left;
}


.sp .sds .sds_inner{
margin: 16% 15px 0 15px;
padding: 5% 1em;
}
.sp .sds .ttl{
padding-top: 70px;
font-size: 19px;
background-size: 42px;
}
.sds .txt{
margin-top: 1em;
}