/* CSS Document */

/*レイアウト調整用*/
.mt20{margin-top:20px;}
.mb0{ margin-bottom:0 !important;}
.mb20{ margin-bottom:20px !important;}

.p0{ padding:0 !important;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}

.color_bl{color:#1c3491;}

.bb_none{border-bottom:none;}

.no_radius{border-radius:0}
.no_deco{
    text-decoration: none;
    color:#000;
}

/*お知らせ欄CSS*/

.top-news__inner{
    padding-bottom:20px;
}

.top-news_news{
    text-indent:-6em;
    padding-left:6em;
    margin-left:1em;
    line-height:1.6em;
}
.top-news__item .date{
    display: inline;
}

/*新しいお知らせ欄のタイトル*/
.new-top-news_title{
	padding: 5px 15px;
	margin-bottom:15px;
	border-bottom:solid 1px  #1c3491;
}
.new-top-news_title a{
	display:block;
	position:relative;
	font-size:18px;
	color:#1c3491;
    text-decoration: none;
}

.new-top-news_title a::after{
    position: absolute;
    right:0;
    font-family: 'Material Icons';
    content: "\e315";
    background-color:#1c3491;
    color:#FFF;
    transition-duration:0.3s;
}
.new-top-news_title a:hover::after{
    background-color:#EBEBEB;
    color:#1c3491;
}
/*　お知らせ欄（テーブル）用のCSS*/
.top-news_table{
    margin-top:20px;
    margin-left:17px;
}
table.top-news_table tr td{
    line-height:1.4em;
}
tr .date{
    font-weight: 600;
    font-size:14px;
    margin-right:1em;
}

/*注力商品のCSS*/
section.top_focus{
    /*padding-top:40px;*/
    padding-bottom:40px;
    margin-bottom:30px;
    /*margin-top:30px;*/
    /*border-top:solid 1px #CCC;*/
    border-bottom:solid 1px #CCC;
}
section.top_focus2{
    padding-top:40px;
    padding-bottom:40px;
    margin-bottom:30px;
    margin-top:30px;
    border-top:solid 1px #CCC;
    border-bottom:solid 1px #CCC;
}
section.product_navi{
    padding-bottom:40px;
    margin-bottom:30px;
    border-bottom:solid 1px #CCC;
}
.top_under_text{
    text-align: center;
    font-size:24px;
    letter-spacing: 0.07em;
    margin-top:20px;
    margin-bottom:25px;
}

/*製品情報欄*/

.newtop_common_title{
    font-size:28px;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
    letter-spacing: 0.3em;
    margin-left: 0.3em;
}
.top_focus_items{
    background-color:#DcE4F9;
    padding:40px;
    padding-top:20px;
    padding-bottom:20px;
    
}
.top_focus_items h2{
    text-align: center;
    font-size:25px;
    color:#1c3491;
}
.focus_imtems_title .top02-header__title--english{
    text-align: center;
    color:#1c3491;
    margin-bottom:25px;
    padding-bottom:5px;
    position: relative;
}
.focus_imtems_title .top02-header__title--english::after{
    position: absolute;
    content: '';
    top:100%;
    left:50%;
    height:0;
    width:0;
    transform: translateX(-50%);
    border-style: solid;
    border-color: #e63333 transparent transparent transparent;
  border-width: 20px 50px 0 50px;
}
@media screen and (min-width:376px){
    .top_focus_items ul li{
        width:48%;
    }
}
@media screen and (min-width:769px){
    .top_focus_items ul li{
        width:inherit;
    }
}
@media screen and (min-width:768px){
    .top_focus_items ul{
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }
}
a.focus_link{
    text-decoration: none;
    
}
.image_block{
    position: relative;
    width:100%;
    height:auto;
    overflow: hidden;
    background-color:#FFF;
    display: block;
    margin-bottom:20px;
}
@media screen and (min-width:769px){
    .image_block{
        width:350px;
        height:450px;
    }
}
.image_block::after{
    position: absolute;
    bottom:0;
    right:0;
    background-color: #1c3491;
    color:#FFF;
    font-family: 'Material Icons';
    content: "\e315";
    font-size:40px;
    padding:0;
    transition-duration:0.3s;
}
.image_block .image_block_img {
    position: relative;
    height:auto;
    width:100%;
    overflow:hidden;
    display: block;
}
@media screen and (min-width:769px){
    .image_block .image_block_img{
        height:250px;
        width:350px;
    }
}
.image_block .image_block_img img{
    width:100%;
}
.image_block .image_block_img::before{
    z-index:100;
    position: absolute;
    content: '';
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color: #000;
    opacity: 0;
    transition-duration:0.3s;
}
a.focus_link:hover .image_block_img::before{
    opacity: 0.4;
}
a.focus_link:hover .image_block::after{
    background-color:#EBEBEB;
    color:#000;
}

.focus_text h4{
    font-size:1.4em;
    font-weight:600;
    margin:20px;
    color:#565656;
}
.focus_text p{
    margin:20px;
    color:#565656;
    font-size:1.1em;
    line-height: 1.6em;
}
/*右端の擬似要素アイコンを差し替え*/
.top-news__title a::after{
    background-image:url(https://issoku.jp/wps/wp-content/uploads/2020/04/icon_kagi.png);
    width:2em;
    height:2em;
        
}

/*製品カテゴリのCSS*/
.top_product_navi{
    display: none;
}
@media screen and (min-width:1025px){
    .top_product_navi{
        display: inherit;
    }
}
@media screen and (min-width:769px){
    .top_product_navi ul{
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }
}
a.top_product_navi_link{
    text-decoration: none;
}
.top_product_navi_block{
    width:220px;
    height:400px;
    background-color:#DcE4F9;
    position: relative;
}
.top_product_navi_block::after{
    position: absolute;
    bottom:0;
    right:0;
    background-color: #1c3491;
    color:#FFF;
    font-family: 'Material Icons';
    content: "\e315";
    font-size:40px;
    padding:0;
    transition-duration:0.3s;
}
a.top_product_navi_link:hover .top_product_navi_block::after{
    background-color:#EBEBEB;
    color:#000;
}
.top_product_navi_image{
    width:220px;
    height:220px;
    position: relative;
}
/*ホバー時に暗くする*/
.top_product_navi_image::before{
    position: absolute;
    z-index: 100;
    content:'';
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#000;
    opacity: 0;
    transition-duration:0.3s;
}
a.top_product_navi_link:hover .top_product_navi_image::before{
    opacity: 0.4;
}
.top_product_navi_image img{
    width:100%;
}
.top_product_navi_text h4{
    text-align: left;
    font-size:1.4em;
    font-weight:600;
    margin:20px;
    margin-bottom:10px;
    color:#565656;
    
}
.top_product_navi_text p{
    margin:20px;
    margin-top:10px;
    color:#565656;
    font-size:0.9em;
    line-height: 1.6em;
}

/*製品情報のモバイル表示用メニュー*/
@media screen and (min-width:1025px){
.top_product_navi_mob{
    display: none;
}
}
.top_product_navi_mob ul li{
    margin:20px;
    padding:20px;
    background-color:#EEE;
}
.top_product_navi_mob ul li a{
    font-size:1.4em;
    display: table;
    vertical-align: middle
}
.mob_navi_img{
    width:60px;
    height:60px;
    margin-right:20px;
    display: table-cell;
}
.mob_navi_span{
    vertical-align: middle;
    display: table-cell;
}
@media screen and (min-width:768px){
    .mob_navi_span br{
        display: none;
    }
}
/*ビデオのスタイル設定*/
.top_video_section{
     border-bottom:solid 1px #CCC;
    margin-bottom:40px;
}
.top_video{
    margin-bottom:20px;
    width:335px;
    margin-right:auto;
    margin-left:auto;
    
}
@media screen and (min-width:769px){
    .top_video{
        display: flex;
        flex-flow: wrap;
        width:inherit;
        justify-content: space-between;
    }
}
.top_video a{
    text-decoration: none;
    display: block;
}
.top_video_block{
    width:335px;
    height:420px;
    position: relative;
    border:solid 1px #CCC;
    margin-bottom:20px;
}
@media screen and (min-width:1025px){
    .top_video_block{
        width:368px;
    }
}
.top_video_block.new::before{
    content: 'NEW';
    z-index: 100;
    position: absolute;
    top:0;
    left:0;
    background-color:#1c3491;
    color:#FFF;
    padding: 7px 15px;
    font-size:18px;
}
.top_video_image{
    width:335px;
    height:250px;
    overflow:hidden;
    position: relative;
}
@media screen and (min-width:1025px){
    .top_video_image{
        width:368px;
    }
}
.top_video_image::before{
    z-index: 100;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
    font-family: 'Material Icons';
    content: '\e039';
    font-size: 78px;
    color: #eb6100;
}
.top_video_image img{
    width:335px;
    height:250px;
    overflow: hidden;
}
@media screen and (min-width:1025px){
    .top_video_image img{
        width:368px;
    }
}

.top_video a:hover .top_video_image img{
    transform: scale(1.4);
    transition-duration: 1s;
    
}
.top_video_title{
    text-align: left;
    font-size:1.4em;
    font-weight:600;
    margin:20px;
    margin-bottom:10px;
    color:#565656; 
    line-height:1.4em;
}
.top_video_text{
    margin:10px 20px;
    color:#565656;
    font-size:1.1em;
    line-height: 1.6em;
}
.video_archive{
    width:100%;
    display: block;
    text-align: right;
}

/*アーカイブページ用*/
.video_title_english{
        color: #1c56bc;
    font-size: 0.78571rem;
    width: 300px;
    margin: 0 auto 45px;
    padding: 10px 0;
    border-top: 2px solid #1c56bc;
    text-align: center;
    font-weight: bold;
}
.top_video_archive_section{
    margin-bottom:40px;
}
.top_video_archive_block{
    width:335px;
    position: relative;
    margin-bottom:20px;
    margin-right:35px;
}
.top_video_archive_block:nth-child(3n){
    margin-right:0;
}
.top_video_archive_title{
    color:#1c3491;
    text-align:left;
    padding-top:20px;
    font-size:18px;
    font-weight:600;
}
.top_video_archive_text{
    margin-top:10px;
}

@media screen and (min-width:1025px){
    .top_video_archive_block{
        width:368px;
    }
}

.top_video_archive{
    margin-bottom:20px;
    width:335px;
    margin-right:auto;
    margin-left:auto;
    
}
@media screen and (min-width:769px){
    .top_video_archive{
        display: flex;
        flex-flow: wrap;
        width:inherit;
    }
}
/*会社案内３種*/

.top_about{
    margin-bottom:20px;
    width:335px;
    margin-right:auto;
    margin-left:auto;
    
}
.top_about a{
    text-decoration: none;
}
@media screen and (min-width:769px){
    .top_about{
        display: flex;
        flex-flow: wrap;
        width:inherit;
        justify-content: space-between;
    }
}
.top_about_block{
    width:335px;
    height:400px;
    position: relative;
    border:solid 1px #CCC;
    margin-bottom:20px;
}
@media screen and (min-width:1025px){
    .top_about_block{
        width:368px;
    }
}
.top_about_image{
    width:335px;
    height:250px;
    overflow:hidden;
    position: relative;
}
@media screen and (min-width:1025px){
    .top_about_image{
        width:368px;
    }
}
.top_about_image img{
    width:335px;
    overflow: hidden;
}
@media screen and (min-width:1025px){
    .top_about_image img{
        width:368px;
    }
}
.top_about a .top_about_image::before{
    z-index:100;
    position: absolute;
    content: '';
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color: #FFF;
    opacity: 0;
    transition-duration:0.3s;
}
.top_about a:hover .top_about_image::before{
    opacity: 0.4;
}
.top_about_title{
    text-align: center;
    font-size:1.8em;
    font-weight:600;
    margin:20px;
    margin-bottom:10px;
    color:#565656; 
}
.top_about_subtitle{
    
    text-align: center;
    font-size:1em;
    font-weight:600;
    margin-bottom:10px;
    color:#1c56bc; 
}
.top_about_text{
    margin:10px 70px;
    color:#565656;
    font-size:1.1em;
    line-height: 1.6em;
}
.top_about_block::after{
    position: absolute;
    bottom:0;
    right:0;
    background-color: #1c3491;
    color:#FFF;
    font-family: 'Material Icons';
    content: "\e315";
    font-size:40px;
    padding:0;
    transition-duration:0.3s;
}
.top_about a:hover .top_about_block::after{
    background-color:#EBEBEB;
    color:#000;
}

/*トップページのサポート情報欄*/
.top_support_title{
    font-size: 2.14286rem;
    padding-bottom: 15px;
    position: relative;
    display: inline-block;
    font-weight: bold;
}
a.support-box__btn{
    position:relative;
    transition: initial;
    transition-duration:0.3s !important;
}
a.support-box__btn:hover{
    opacity: 1;
    background-color:#EBEBEB;
    color:#565656;
    transition-duration:0.3s !important;
}
a.support-box__btn::before{
    position:absolute;
    font-family: 'Material Icons';
    content: "\e315";
    background-color:#FFF;
    color:#1c3491;
    font-size:40px;
    right:0;
    top:0;
    margin-right:10px;
    margin-top:10px;
    margin-left:10px;
    margin-bottom:10px;
    padding-top:10px;
    padding-bottom:5px;
    transition-duration:0.3s !important;
    width:40px;
    height:20px;
    
}
a.support-box__btn:hover::before{
    background-color:#1C3491;
    color:#FFF;
}
.support-box__btn::after{
    background-image:none;
}

/*スライダーの背景調整*/
#mv .swiper-slide{
    background-color:#0446a5 !important;
    height:200px;
}
@media screen and (min-width:769px){
    #mv .swiper-slide{
    height:300px;
    }
}
/*スライダー表示画像の位置修正（ipad）*/
@media screen and (max-width:768px){
    #mv .swiper-slide{
        background-position:center center;
    }
}

/*PR動画用のスタイル設定*/
section.video_pr{

}
@media screen and (min-width:746px){
    .pr_block_flex{
        display:flex;
        justify-content: space-between;
    }
}
@media screen and (min-width:746px){
    .pr_video_block{
        width:805px;
        margin:0 auto;
    }
}
/*.pr_video_title{
    position:relative;
    margin-top:20px;
    font-size:24px;
    color:#565656;
}*/
.pr_video_text{
    font-size:24px;
    color:#565699;
    font-weight:600;
    margin-top:20px;
    margin-left:10px;
    line-height:1.4em;
}
@media screen and (min-width:746px){
    .pr_video_text{
        width:50%;
    }
}

.pr_video_image{
    position:relative;
    overflow:hidden;
}
@media screen and (min-width:746px){
    .pr_video_image{
    width:45%;

    }
}
.pr_video_image img{
    width:100%;
    overflow:hidden;
}
/*.pr_video_image::before{
    z-index: 100;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
    font-family: 'Material Icons';
    content: '\e039';
    font-size: 148px;
    color: #FFF;
}*/
.youtube_msg{
    width:805px;
    height:20px;
    margin:0 auto 16px auto;
    display:flex;
}
.youtube_msg div{
 
}
.youtube_msg img{
    height:100%;
}
@media screen and (max-width:745px){
    .youtube_msg{
        display:none;
    }
}
/*モバイル用メッセージ*/
.youtube_msg_mob{
    height:18px;
    line-height:18px;
    margin:0 auto 16px auto;
}
.youtube_msg_mob img{
    height:100%;
    width:auto;
}
@media screen and (min-width:746px){
    .youtube_msg_mob{
        display:none;
    }
    
}
@media screen and (max-width:500px){
    .youtube_msg_mob img{
        display:none;
    }
}

/*トップページ注目製品欄用CSS*/

/*マージン調整用*/
.mt40{
    margin-top:40px;
}

@media screen and (min-width:746px){
    .features .block-inner{
        width:825px;
    }
    
}
.features_header{
    margin:5px;
    font-size:1.2em;
    line-height:1.2em;
    color:#992222;

}
.featuers_head{
    padding-top:40px;
    margin:40px;
    margin-top:20px;
    margin-bottom:10px;
    font-size:2em;
    color:#00F;
    font-weight:600;
}
.features_wrapper{
    background-color:#FFF;
    margin:10px;
    padding:10px;
    border:solid 10px #DcE4F9;
}
.features_container{

}
@media screen and (min-width:746px){
    .features_container{
        display:flex;
    }
}

.features_box_image1{
    width:100%;
}
@media screen and (min-width:746px){
    .features_box_image1{
        width:450px;
    }
}
.features_box_image1 img{
    width:100%;
}
@media screen and (min-width:376px){
    .features_box_image1 img{
        width:50%;
        margin-right:auto;
        margin-left:auto;
        display: block;
    }
}
@media screen and (min-width:746px){
    .features_box_image1 img{
        width:100%;
    }
}
.features_box_video{
    width:100%;
}

.features_box_image2{
    width:100%;
}
@media screen and (min-width:746px){
    .features_box_image2{
        width:40%;
    }
}
.features_box_image2 img{
    width:100%;
}
.features_name{
    font-size:25px;
    color:#1c3491;
    font-weight:300;
    line-height:1.2em;
}
.features_box_video{
    width:100%;
}

.features_box_video iframe{
    display:block;
    margin-right:auto;
    margin-left:auto;
    width:300px;
    height:168px;
}
@media screen and (min-width:746px){
.features_box_video iframe{
    width:300px;
    height:168px;
    }
}
@media screen and (min-width:980px){
.features_box_video iframe{
    width:300px;
    height:168px;
    }
}
.features_box_text{
    font-size:1.1em;
    line-height:1.5em;
    position:relative;
    display:flex;
}
.features_box_text2{
    font-size:1.1em;
    line-height:1.5em;
    position:relative;
    display:flex;
}
@media screen and (min-width:746px){
    .features_box_text2{
        width:75%;
    }
}
.features_box_text2_con{
    display:block;
    margin-left:20px;
}
.textbox{
    width:100%;
    /*margin-right:5em;*/
}
/*ボタンテストのため一時コメントアウト
.features_box_text::after,.features_box_text2::after{
    position: absolute;
    bottom:0;
    right:0;
    background-color: #1c3491;
    color:#FFF;
    font-family: 'Material Icons';
    content: "\e315";
    font-size:40px;
    padding:5px 0;
    transition-duration:0.3s;
}
.features_box_text:hover::after,.features_box_text2:hover::after{
    background-color:#EBEBEB;
    color:#000;
}
*/
.features_link{
    text-decoration: none;
    color:#000;
}
.features_link:hover{
    text-decoration: none;
    color:#000;
}


/*デザイン案2の方のスタイル*/
@media screen and (min-width:746px){
    .headlines_flexbox{
        display:flex;
    }
}

.j_right{
    justify-content:flex-end;
}
.headlines_container{
    width:100%;
    margin-left:20px;
    margin-right:20px;
}
@media screen and (min-width:746px){
    .headlines_container{
        width:800px;
        margin:40px auto;
    }
}

.headlines_head{
    font-size:4em;
    color:#E83922;
    text-align: center;
    font-weight:600;
}
.headlines_title{
    font-size:1.8em;
    font-weight:600;
    color:#FF9446;
    margin-top:40px;
    margin-bottom:20px;
}
.headlines_image1{
    width:100%;
}
@media screen and (min-width:746px){
    .headlines_image1{
        width:50%;
    }
}
.headlines_image1 img{
    width:auto;
            height:225px;
        margin-left:0;
        margin-right:auto;
}
.headlines_video{
    width:50%;
    margin-right:auto;
    margin-left:auto;
}
.headlines_text{
    font-size:1.2em;
    line-height:1.5em;
    margin-top:20px;
    margin-bottom:20px;
}
.headlines_button{
    text-align: center;
    display:block;
    padding:8px;
    background-color: #FF9446;
    color:#FFF;
    font-weight:600;
    font-size:1em;
    border-radius:12px;
    transition-duration: 0.3s;
    margin-top:0.5em;
    border:solid 1px #FF9446;
    text-decoration: none;
}
.headlines_button:hover{
    text-decoration: none;
    color:#FF9446;
    background-color:#FFF;
    
}
.headlines_desc{
    font-size:1.2em;
    line-height:1.5em;
    margin-top:20px;
    margin-bottom:20px;
}
/*図形描画*/
.border_container{
    width:200px;
    padding:15px;
    padding-top:0;
    background-color:#33A;
    border-radius:10px;
    margin-right:auto;
    margin-left:auto;
    margin-bottom:20px;
    font-weight:600;
    font-size:1.2em;
    letter-spacing: .2em;
    color:#FFF;
    text-align:center;
}
.border_box{
    width:40px;
    display:block;
    margin-right:auto;
    margin-left:auto;

}
.red_tri{
    border-top:solid 10px #F00;
    border-right:solid 20px transparent;
    border-bottom:solid 5px transparent;
    border-left:solid 20px transparent;
}
/*画像縮小用*/
.grd_con{
    margin-right:auto;
    margin-left:auto;
}
@media screen and (min-width:746px){
    .grd_con{
        width:600px;
    }
}
/*2021/04追加　在庫情報までのページ修正*/
.zaiko_head{
    background-color:#FFF;
    width:100%;
    text-align:center;
    font-size:2.14286rem;
    font-weight:600;
    padding-bottom:20px;
}
.zaiko_read{
    background-color: #FFF;
    text-align:center;
}

/*支社リンクの調整用スタイル*/
.branch{
    font-size:1.07em;
    line-height:1.7em;
}
/*「登録者様限定　在庫情報」の案内用*/
.gentei{
    position: relative;
}
.gentei::after{
    position:absolute;
    top:100%;
    content: '※パスワード入力必要';
    margin-top:6px;
    width:294px;
    text-align: right;
    color:#000;
}
.pb0{
    padding-bottom:0;
}
.pb20{
    padding-bottom:20px;
}
.pass_msg{
    padding-top:5px;
    text-align: right;
    color:#000;
    background-color:#FFF;
    margin-top:-30px;
}
@media screen and (min-width:769px){
    .pass_msg{
        padding-right: 250px;
        padding-left:250px;
        margin-top:0;
    }
}