@charset "utf-8";
/* CSS Document */

#cover { margin-bottom:20px; padding:1px 0;}

/*----------------------------------------------------*/
#main.top{}

#main.top .grid_a { }
#main.top .grid_a .unit_l { }
#main.top .grid_a .unit_r { }


#main.top .grid_a .unit_l .grid_b{}
#main.top .grid_a .unit_l .grid_b .unit_l_l{ width:350px; float:left;}
#main.top .grid_a .unit_l .grid_b .unit_l_r{ width:350px; float:right; background:#FFFFFF;}

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

#main.top .btns,
#main.top .btns li {list-style: none;margin: 0;padding: 0;}

#main.top .btns{ display:flex; margin-bottom:1em; background:#FFFFFF; padding:1em 0.5em;}

#main.top .btns li{display: inline-block;padding:0 0.5em;width: calc(100% / 3);}


#main.top .btns li.last{ margin-right:0;}

/*----------------------------------------------------*/
#main.top .item { background: url(../images/top/bg_mesh_orange.gif);border-radius: 4px;-webkit-border-radius: 4px; padding:2px; margin-left:auto; margin-right:auto;margin-bottom:8px;}
#main.top .item .inner{ background:#FFFFFF;  padding:8px; border-radius: 3px;-webkit-border-radius: 3px;}
#main.top .item .photo{ width:34%; float:left;}
#main.top .item dl{display:block; width:63%; float:right; }
#main.top .item dt{ border-bottom:1px dotted #B1B1B1; margin-bottom:4px; padding-bottom: 4px}
#main.top .item dd {font-size: 0.8em;}
/*----------------------------------------------------*/
#main.top .whatnew_list{ background:#FFFFFF;}
#main.top .whatnew_list h3.h_whatsnew{ display:block; padding:10px 15px;border-bottom:1px solid #C3D7ED}
#main.top .whatnew_list h3.h_whatsnew span{ float:right; padding-top:8px; }
/*----------------------------------------------------*/
#main.top .grid_a .unit_r .h_support{ margin-top:-30px;}
#main.top .grid_a .unit_r .btns_support,
#main.top .grid_a .unit_r .btns_support li {list-style: none;margin: 0;padding: 0;}
#main.top .grid_a .unit_r .btns_support { margin-bottom:1em;display: flex}
#main.top .grid_a .unit_r .btns_support li{display: inline-block;width: calc(100% / 4);}
#main.top .grid_a .unit_r .btns_support li img {width: 100%;}
/*----------------------------------------------------*/
#main.top .grid_a .unit_r p.btn{ margin-bottom:1em;padding: 0;}
/*----------------------------------------------------*/


#main.top .grid_a .unit_r .cnt_tv{ background:#FFFFFF; padding:1px 20px; margin-bottom:22px; position:relative;}

#main.top .grid_a .unit_r .cnt_tv .three_min{ width:84px; height:77px; position:absolute; top:-36px; right:-66px;}

#main.top .grid_a .unit_r .cnt_tv h3{ padding:10px 0;}
#main.top .grid_a .unit_r .cnt_tv p.btn_more{ background:url(../images/top/icon_video.gif) no-repeat 0px 50%; padding:10px 0;padding-left:24px; font-size:16px;}

#main.top .grid_a .unit_r .cnt_tv p.btn_more a{ color:#51B3C4;}

#main.top .grid_a .unit_r .cnt_tv p.btn_more span{ float:right;}
/*----------------------------------------------------*/
#main.top .grid_a .unit_r .btn_link li{display: inline-block;vertical-align:top; *display: inline;*zoom: 1;}
#main.top .grid_a .unit_r .btn_link2 li{text-align: center; display: inline-block;vertical-align:top; *display: inline;*zoom: 1;}
/*----------------------------------------------------*/
#cover { width:100%; max-width:1280px; margin-left:auto; margin-right:auto; }
/*----------------------------------------------------*/
.swiper-pagination-outer { width: 100%;position: relative; height: 2em}
.swiper-pagination-bullet {width: 3em;height: 0.4em;display: inline-block;border-radius:0;background: #000;opacity: .2; margin:0 0.4em;}
.swiper-pagination-bullet-active {background: #51B3C4 !important;opacity: 1;}
.swiper-pagination { left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);width:100%}
/*以降リニューアル　上部のCSSも英語版用に保存----------------------------------------------------*/
.ch-fp {background-image:url("../images/top/bg-abs-1.jpg?20201009b");background-position: center; background-size: cover;padding: 2em 1em;text-align: center;color: #FFF;font-size: 1em;}
.ch-fp strong {font-size: 2em;margin-bottom:0;display: block;letter-spacing: 0.1em;}
.ch-fp span {font-size: 0.8em;display: block;letter-spacing: 0.1em;margin-top: 1em;}
/*----------------------------------------------------*/
.packaging {background-image: url("../images/pageparts/bg-bubble.png?20201009b"); background-position:left 0 bottom 0; background-repeat: repeat-x}
.links-contents-outer {position: static;top: 3em;right: 0;}
.links-contents {background: #FFF;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.25);border-top: 0.3em solid #004FA1;padding:2em 1em;}
.links-contents h5 {color: #004FA1;letter-spacing: 0.2em;font-size: 0.8em;margin-bottom: 2em;}
.list-contets {border-top: 1px dotted #004FA1;}
.list-contets li {border-bottom: 1px dotted #004FA1;}
.list-contets li a {display: block;padding: 0.6em 0;letter-spacing: 0;white-space: nowrap;}
.list-contets li a .material-icons {color: #004FA1;}
.links-contents-outer .btn-navy-arrow-lg {margin-bottom: -3.6em;}
/*----------------------------------------------------*/
.flex-whatsnew {display: flex;}
.ch-whatsnew {border: 1px solid #004FA1;height: 100%;padding: 1em 1em 4em 1em;position: relative;}
.ch-whatsnew h3 {color: #004FA1;letter-spacing: 0.1em;font-size: 1em;}
.ch-whatsnew h3 strong{font-size: 1.8em;margin-bottom: 0.3em;display: block;}
.ch-whatsnew h3 span {font-size: 0.8em;}
.ch-whatsnew .link {position: absolute;bottom: 0;right: 1em;color: #004FA1;padding: 0.6em 0;}
/*----------------------------------------------------*/
.list-whatsnew {border-top: 1px dotted #004FA1;}
.list-whatsnew li{border-bottom: 1px dotted #004FA1;}
.list-whatsnew li a { display:flex;padding: 0.8em 0;width: 100%;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.list-whatsnew li a .date {width: 5em;font-size: 0.8em;margin-right: 1em;letter-spacing: 0.05em;}
.list-whatsnew li a .category {width:10em;font-size: 0.8em;border: 1px solid #004FA1;text-align:center;color: #004FA1;margin-right: 1em;padding: 0.1em 0;}
.list-whatsnew li a .summary {flex: 1}
.list-whatsnew li a .material-icons {width: 1em;margin-left: auto;color: #004FA1;}
/*----------------------------------------------------*/
.contents {background-image: url("../images/top/bg-abs-2.jpg?20201009b"); background-position:center; background-repeat:no-repeat; background-size: cover;background-attachment: fixed}
.item-contents {display: block;position: relative;box-shadow:0px 0px 10px 0px rgba(2,71,128,0.5);overflow: hidden}
.item-contents img {transition: all 0.3s ease-out;}
.item-contents:hover img {transform: scale(1.1)}
.item-contents span {background: rgba(0,79,161,0.8);text-align: center;color: #FFF;padding: 0.6em 0;position: absolute;left: 0;bottom: 0;width: 100%;line-height: 1.1;}
.item-contents span strong {display: block;font-size: 1.0em;letter-spacing: 0.0em;white-space: nowrap;}
.item-contents span small {display: inline-block;font-size: 0.6em;font-weight: normal !important;letter-spacing: 0.2em;position: relative;}
.item-contents span small::before {content:'';background: #FFF;height: 1px;width: 2em;top: 50%;left: -2.4em;position: absolute;transition: all 0.3s ease-out;}
.item-contents span small::after {content: '';background: #FFF;height: 1px;width: 2em;top: 50%;right: -2.4em;position: absolute;transition: all 0.3s ease-out;}
.item-contents:hover span small::before {width: 3em;left: -3.4em;}
.item-contents:hover span small::after {width: 3em;right: -3.4em;}
/*----------------------------------------------------*/
.slider-arrow-left,
.slider-arrow-right {position: absolute;z-index: 100;top: 50%;width: 3em;margin-top: -1.5em;}
.slider-arrow-left {left: 0;}
.slider-arrow-right{right: 0;}
/*----------------------------------------------------*/
.swiper-pagination-outer { width: 100%;position: absolute; height:1em;z-index: 100;left: 0;bottom: 0;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.swiper-pagination-bullet {width: 3em;height: 3px;display: inline-block;border-radius:0;background: #000;opacity: .2; margin:0 0.4em;}
.swiper-pagination-bullet-active {background: #009FE0 !important;opacity: 1;}
.swiper-pagination {display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}

/**/
.products-link {display: grid;aspect-ratio: 16 / 10;grid-template-columns: repeat(12,1fr);gap:1rem;padding-right: 0;}
.products-link__item {display: grid;justify-content: center;
    align-items: center;background-color: #fff;box-shadow:0em 0.5em 1em 0em hsla(0,0%,0%,0.1);transition: transform 0.3s ease-out;}
.products-link__item-logo {grid-area:1/1/3/4;background-color:unset;box-shadow:none;display: none;}
.products-link__item-tsukamerukun {grid-area:1/1/2/5}
.products-link__item-kyushitsu {grid-area:1/5/2/9}
.products-link__item-cyokushin {grid-area:1/9/2/13}
.products-link__item-syakou {grid-area:2/1/3/5}
.products-link__item-renji {grid-area:2/5/3/9}
.products-link__item-rakuchinsan {grid-area:2/5/3/9}
.products-link__item-maltopml {grid-area:2/9/3/13}
.products-link__image {max-width: 26rem;display: block;height: auto;}
img.products-link__image-alt{max-width: 18rem;}
.products-link a{display: grid;justify-content: center;
    align-items: center;height: 100%;padding-inline: 0.5em;overflow: hidden;}
.products-link__item:hover {transform: scale(1.15);}

@media (max-width: 767px) {
.cnt_tv h3 img{width: 80%;}
#main.top .grid_a .unit_r .cnt_tv .three_min {width: 20%;height: auto;top: -1em;right:0;}
#main.top .grid_a .unit_r .cnt_tv .three_min img {width: 100%;}
#main.top .grid_a .unit_r .h_support {margin-top: 1em;}
/*----------------------------------------------------*/
.links-contents-outer {position: static;margin-top: 2rem;}
.list-contets {font-size: 0.8em;}
.flex-whatsnew {display: block;}
.ch-whatsnew h3 strong{display: inline-block;}
.ch-whatsnew {padding: 1em 1em 3em;}
/*----------------------------------------------------*/
.list-whatsnew li a {flex-wrap: wrap}
.list-whatsnew li a .date{order: 1}
.list-whatsnew li a .category{order: 2}
.list-whatsnew li a .summary {width: 100%;order: 4;flex: auto;}
.list-whatsnew li a .material-icons {order: 3}
/*----------------------------------------------------*/
.contents {background-attachment:scroll}

.slider-arrow-left, .slider-arrow-right {width: 2em;margin-top: -1em;}
/*----------------------------------------------------*/
.list-contets li a {letter-spacing: 0;font-size: 0.9em;white-space: nowrap;}

.products-link__image {max-width: 17rem;}
img.products-link__image-alt{max-width: 11rem;}

}