@charset "UTF-8";

/*リンクの設定*/

.main a:hover {
    color: #3faea1;
}

a:active {
    color: #3faea1;
}

/*リストの点をなくす*/
#navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/*clearfixの設定*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.clearfix {
    /zoom: 1;
}

/*IE6,7用*/

.recommend_left {
    float: left;
    width: 180px;
    padding-top: 10px;
}

.recommend_right {
    float: left;
    width: 435px;
    padding: 10px;
}

.date {
    float: left;
    width: 80px;
    padding-left: 7px;
    padding-top: 3px;
}

.topic {
    float: left;
    padding-left: 7px;
    padding-top: 3px;
    text-align: left;
}

.splitline {
    border-bottom: 1px dotted #525252;
    color: #333333;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/*スクロールバーを表示する*/
html {
    overflow-y: scroll;
}


/*--▼ヘッダーの設定を開始--*/

/*ヘッダーエリアの幅を画面全体に*/
#headerArea {
    width: 100%;
    position: relative;
    min-width: 960px;
    border-bottom: 5px solid #1E2170;
    margin: 0px;
    padding: 0;
}

/*ヘッダーの中身(クラスin）の幅を940で左右マージンauto*/
div.in {
    max-width: 940px;
    margin: 0px auto;
    /*　左右マージンauto*/
}

/*会社名を左に*/
div.in h2.left {
    float: left;
    font-size: 130%;
    margin: 3px;
}

div#headerArea img {
    vertical-align: text-bottom;
}

/*お問い合わせを右に*/
div.in ul#utility li {
    float: right;
    margin: 50px 0 0 0;
    display: block;
}

/*ナビゲーション枠を画面全体に*/
#navigation {
    width: 100%;
    position: relative;
    background: url(../images/btn.png) 0 repeat-x;
    height: 60px;
    padding: 0;
    margin: 0;
    text-align: center;
}

/*ナビゲーションの位置を決定*/
ul#navi {
    width: 940px;
    /* ヘッダメニューの幅 */
    margin: 0 auto;
    /* センタリング */
    padding: 0px;
    text-align: center;
}

/*ナビゲーションの中身を水平にかつリンクの幅を指定*/
ul#navi li {
    float: left;
    line-height: 100%;
    padding: 0;
}

/*homeの幅とリンク設定*/
ul#navi li a#naviFarst {
    display: block;
    width: 63px;
}

/*home画像のボーダー*/
#navigation img {
    border-width: 1px 1px 0px;
    /* リンクエリアの境界線の太さ（上、左右、下） */
    border-color: #ffffff #b2b2b2 #808080 #b2b2b2;
    /* リンクエリアの境界線色（上右下左） */
    border-style: solid;
    /* リンクエリアの境界線スタイル */
}

/*その他5つの幅設定*/
ul#navi li a.navi {
    display: block;
    width: 174px;
}




/*--▲ヘッダーの終了--*/

/*--▼メインコンテンツの設定--*/

/*contentsAreaの設定-ヘッダー後の画面全体の設定*/

#contentsArea {
    width: 100%;
    max-width: 960px;
    padding-top: 100px;
    margin-top: -100px;
    margin-left: auto;
    margin-right: auto;
}


/*--▼トップページの設定--*/

/*mainVisual(トップ画像)の設定*/
.in #mainVisual {
    margin-top: 5px;
}


/*商品ラインナップの設定*/

/*上のボックス（商品ラインナップ）の設定*/
#upperArea {
    width: 934px;
    height: auto;
    /*幅と高さ*/
    border: 3px solid #f0f0f0;
    background: #ffffff;
    /*枠線と背景の色指定*/
    margin: 1.5em 0;
    /*(上下　左右）*/
    padding-bottom: 1em;
}

div.mediumBox {
    width: 280px;
    height: auto;
    /*幅と高さ*/
    border: 3px solid #a0a0a0;
    background: #ffffff;
    /*枠線と背景の色指定*/
    float: left;
    display: inline;
    margin-left: 19px;
    /*一列に並べ、左にマージン19ｐｘ*/
    position: relative;
    overflow: hidden;
    padding: 0;
}

/*見出しの位置設定*/
div#titleBlock {
    margin-bottom: 25px;
    width: 934px;
    position: relative;
}

/*商品ラインナップ（文字）の位置設定*/
div#titleBlock h3#title {
    margin-top: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 120%;
}

/*商品ラインアップとProductの文字位置設定とボーダー設定*/
div#title {
    float: left;
    padding: 0px;
    margin: 10px 10px 0px 10px;
    /*上右下左*/
    border-right: 2px solid #add8e6;
    padding-right: 15px;
}

/*productなど英字の文字設定*/
span.smallEn {
    margin-top: 2px;
    /* 英字部分の上マージン */
    font-size: 8px;
    /* 英字の文字サイズ */
    font-weight: normal;
    /* 文字の太さ（ノーマル） */
    padding-left: 20px;
    color: #add8e6;
}

/*説明文の設定*/
div#titleBlock p#comment {
    padding: 20px 350px 0 0;
    text-align: left;
    line-height: 100%;
    float: right;
    font-weight: bold;
    _display: inline;
    /*IE用*/

}

/*文字の設定*/
#titleBlock h3,
#underArea h3,
p {
    margin: 0px;
    padding: 0px;
    line-height: 100%;
    text-align: left;
    font-size: 100%;
}


/*画像の設定*/
div.mediumBox img.top {
    margin: 35px auto 10px auto;
}


/*3つの商品情報の見出し設定*/
h2.subtitle {
    font-family: Arial;
    width: 260px;
    font-size: 130%;
    height: 10px;
    padding: 0;
    margin: 0.5em auto 1em auto;
}

div.mediumBox p {
    width: 260px;
    text-align: justify;
    padding: 0 0 0 7px;
    line-height: 120%;
    height: 30px;
    margin-bottom: 1.5em;
}

/*リンク設定*/
a.t {
    text-decoration: none;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

a.t:link {
    color: #202020;
}

a.t:visited {
    color: #202020;
}

a.t:hover {
    color: #606060;
    cursor: pointer;
}

a.t:hover img {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

a.t:active {
    color: #202020;
}

/*商品情報のリンク設定*/
a.medibox {
    text-decoration: none;
    width: 274px;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

/*下のエリア（事業部・お問い合わせ）のリンク設定*/
a.small {
    text-decoration: none;
    width: 194px;
    height: 174px;
    display: block;
    margin: 0;
    padding: 0;
}

/*--下のエリア（新着・事業部・お問い合わせ）の設定--*/
#underArea {
    margin-bottom: 20px;
    margin-top: 20px;
}

/*--新着情報の設定--*/
div#leftBox {
    width: 500px;
    height: 180px;
    border: 3px solid #f0f0f0;
    background: #ffffff;
    overflow: hidden;
}

/*文字部分の設定*/
dl.news {
    width: 494px;
    height: auto;
    border: none;
    margin: 0 auto;
    /* センタリング */
    zoom: 1;
    line-height: 140%;
}

/* 日付エリア*/
dt {
	width: 6.7em;
	/* 日付エリアの幅 */
	float: left;
	/* 日付エリアのパディング（上右下左） */
	line-height: 120%;
	padding: 5px;
	/* 行の高さ */
	clear: both;
}

/* 本文エリア */
dd {
    margin-left: -1.4em;
    padding: 4px 3px 5px 6.6em;
    /* 本文エリアのパディング（上右下左） */
    border-bottom: 1px #c0c0c0 dotted;
    /* 本文エリア下境界線 */
    line-height: 120%;
    /* 行の高さ*/
    text-align: left;

}


/*一覧を見る*/
#leftBox dl.news a.more {
    float: right;
    margin: 0 0 6px 0;
    text-decoration: none;
    /* テキストの下線（なし） */
    color: #666666;
    /* 文字色 */
}




/*--下3つのボックス内見出しの設定--*/
#underArea h3.title {
    padding-top: 10px;
    padding-left: 5px;
    font-size: 14px;
}

/*説明文の設定*/
#underArea p.passage {
    padding: 15px 10px;
}

/*下のボックス内文字設定*/


/*--事業部案内とお問い合わせの設定--*/

/*下２つボックスの設定*/
div.smallBox {
    width: 198px;
    height: 180px;
    border: 3px solid #f0f0f0;
    background: #ffffff;
    margin-left: 10px;
    overflow: hidden;
}

/*下2つの文字の英字の設定*/
span.smallEn {
    margin-top: 2px;
    /* 英字部分の上マージン */
    font-size: 8px;
    /* 英字の文字サイズ */
    font-weight: normal;
    /* 文字の太さ（ノーマル） */
    padding-left: 10px;
    color: #add8e6;
}

/*横に並べる*/
div#leftBox {
    float: left;
    display: inline;
}

div.smallBox {
    float: left;
    display: inline;
}



/*--▲トップページの設定終了--*/


/*--▼下層ページの設定--*/
.main{
    /* margin-top: 50px; */
}
/*右側コンテンツの設定*/
#sectionRight {
    float: right;
    width: 75%;
}

/*seedsの設定*/
.seeds {
    margin: 20px 0 10px 0;
}

/*ページタイトルの設定*/
div#pageTitle {
    width: 650px;
    height: 50px;
    border: 3px solid #f0f0f0;
    background-color: #ffffff;
    margin: 0;
    padding: 0.5em 10px 0.5em 20px;
}

div#pageTitle h2#pageTitle {
    padding: 0 0 0 5px;
    margin: 0.5em 5px;
    font-size: 1.8rem;
    text-align: left;
}

/*文字の位置設定とボーダーの設定*/

/*コンテンツのボックスの設定*/
div.baseBox {
    width: 650px;
    height: auto;
    background-color: #ffffff;
    margin: 2em 0 1em 0;
    overflow: hidden;
}

/*見出し文字の設定*/
h3.headline {
    text-align: left;
    line-height: 130%;
    margin: 5px 0 0.5em 0;
    width: 100%;
    padding: 0 0 0.5em 0;
    font-size: 1.6rem;
	    border-bottom: 3px solid #3faea1;
}

div.baseBox p {
    text-align: left;
    line-height: 160%;
    padding: 2px 10px 0 5px;
    width: 620px;
    margin-right: 10px;
}

p.fin {
    text-align: left;
    line-height: 150%;
    width: 550px;
    margin: 0 0 20px 10px;
}

p.access {
    text-align: left;
    line-height: 150%;
    width: 550px;
    padding-top: 2px;
    margin: 10px 0 0 10px;
}

/*p強調*/

p.strong {
    font-weight: bolder;
    margin: 0.5em 0 0.5em 10px;
}

/*新着情報・展示会情報のリスト部分設定*/
dl.list {
    width: 100%;
    height: auto;
    border: none;
    /* センタリング */
    overflow: hidden;
    zoom: 1;
}

/*（商品情報）小ボックスの設定*/
div.itemBox {
    width: 200px;
    height: 290px;
    border: 2px solid #a0a0a0;
    background: #ffffff;
    position: relative;
    margin: 1em 0 1em 12px;
    float: left;
    display: inline;
    /*横に並べる*/
    overflow: hidden;
}

/*最初をそろえる*/
div.itemBox#firstBox,
#sfirstBox,
div.oblong#obFirst {
    margin-left: 5px;
}

/*横長長方形の設定*/
div.oblong {
    width: 309px;
    height: 100px;
    margin: 20px 0 20px 10px;
    padding: 0;
    border: 2px solid #a0a0a0;
    background: #ffffff;
    position: relative;
    float: left;
    display: inline;
    /*横に並べる*/
    overflow: hidden;
}

/*小ボックスの文字設定*/
div.itemBox h3.subtitle {
    margin: 0;
    padding: 5px;
    width: 186px;
    font-size: 120%;
    height: 30px;
}

/*アイテムボックス*/
div.baseBox p.item {
    width: 186px;
    height: 80px;
    margin: 0 5px 0 5px;
}

/*横長長方形の文字設定*/
.oblong h3 {
    width: 190px;
    text-align: left;
    float: right;
}

.oblong#obFirst h3 {
    margin: 10px 0 0 0;
    padding: 0;
}

.oblong h3#warifu {
    width: 175px;
    padding: 0;
    margin: 1em auto;
    text-align: left;
    font-size: 120%;
}

.oblong h3#d {
    text-align: left;
    width: 150px;
    font-size: 120%;
    float: right;
    margin: 30px 0 10px 10px;
}

/*横長長方形のリンク設定*/
.oblong a.ob {
    text-decoration: none;
    width: 305px;
    height: 96px;
    display: block;
    margin: 0;
    padding: 0;
}

/*横ボックスの中の設定*/
/*画像の設定*/
div.oblong img {
    float: left;
    margin-right: 5px;
    padding: 5px;
}

/*画像の設定*/
img.contents {
    padding: 2px;
}

img.solution {
    padding: 2px;
}

div.baseBox div.recommend_right p {
    width: 435px;
}

/*商品情報下の段ボックス内タイトル*/
div.baseBox h3.undertitle {
    width: 186px;
    height: 45px;
    padding: 5px;
    margin: 0;
    text-align: center;
    font-size: 120%;
}



/*---▼サイドメニューの設定---*/

div#sectionLeft {
	width: 20%;
	height: auto;
	padding: 0;
	margin: 2em 5px 0;
	float: left;
}

/*---うえのボックスの設定---*/
div#sideMenu {
    width: 100%;
    height: auto;
    border: 2px solid #e0e0e0;
    background: #ffffff;
    margin: 0;
}

div#sideMenu ul.sideBar {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: left;
    font-size: 120%;
}

/*中点なし、左揃えマージンとパディングゼロ*/
div#sideMenu ul.sideBar li {
    padding: 0px 3px;
}

/*パッディング（上下、左右）*/

/*---詳細のメニュー設定---*/
div#sideMenu ul.subMenu li {
    text-align: left;
    list-style-type: none;
    font-size: 1.4rem;
}

/*詳細のバーの設定*/
div#sideMenu ul.subMenu li a {
	display: block;
	position: relative;
	/* IE6用 */
	text-decoration: none;
	/* テキストの下線（なし） */
	border-bottom: 1px #c0c0c0 dotted;
	padding: 8px 4px 8px;
	/* リンクエリアのパディング（上下、左右） */
	font-weight: normal;
}

div#sideMenu ul.subMenu li a#last {
    border: 2px solid #ffffff;
}

/*---全体のリンクの設定---*/
div#sideMenu ul.sideBar li a {
	display: block;
	position: relative;
	/* IE6用 */
	text-decoration: none;
	font-size: 1.6rem;    /* テキストの下線（なし） */
}
div#sideMenu ul.sideBar li a::after {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 2px solid #3faea1;
	border-right: 2px solid #3faea1;
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg)
}


li#fast {
    border-left: 5px solid #add8e6;
    /*見出しの左ボーダー*/
    margin: 5px 0 2px 5px;
    padding: 3px 0 2px 2px;
    font-weight: bolder;
}

/*見出し文字設定*/

/*---見出し部分の文字設定--*/
/*サイドメニューの一番上の見出し設定*/
div#sideMenu span#capture {
    /*見出しの左ボーダー*/
    margin: 2px 0 2px 3px;
    padding: 8px 0 8px 2px;
    font-size: 1.8rem;
    font-weight: bolder;
}
.empty{
    display: block;
    height: 1px;
    padding-top: 60px;
    margin-top: -60px;
}
/*見出し文字設定*/
div#sideMenu span.active {
    border-bottom: 2px solid #3faea1;
    /* アクティブ時の下境界線色 */
    background: #fff repeat-x;
    /*アクティブ時の背景*/
    display: block;
    font-size: 100%;
}

/*商品・サービス情報の中見出し（下線付き）部分の設定*/
div#sideMenu span.capture {
    border-bottom: 3px solid #add8e6;
    /*見出し下線*/
    font-weight: bolder;
    display: block;
    font-size: 100%;
    padding-left: 13px;
}


/* --- ポイント時の設定 --- */
div#sideMenu ul.sideBar li a:link,
#sideMenu ul.sideBar li a:visited {
    color: #505050;
}

/*リンク(通常）と訪問済みの設定*/
/*マウスオーバーとアクティブ時*/
div#sideMenu ul.sideBar li a:hover,
div#sideMenu ul.subMenu li a#last:hover,
div#sideMenu ul.sideBar ul.subMenu li a:hover,
div#sideMenu ul.sideBar li a:active,
div#sideMenu ul.subMenu li a#last:active div#sideMenu ul.sideBar ul.subMenu li a:active {
    /* border-bottom: 2px solid #add8e6; */
    /* ポイント時の下境界線色 */
    background-color: #f0f0f0;
    /*ポイント時の背景*/
}

/*アクティブになっている見出しメニュー*/
li.active {
    border-bottom: 2px solid #add8e6;
    /* アクティブ時の下境界線色 */
    background-color: #f0f0f0;
    /*アクティブ時の背景*/
}

/*---お問い合わせの設定---*/
div#contactMenu {
    width: 230px;
    height: auto;
    border: 2px solid #e0e0e0;
    background: #ffffff;
    padding-top: 10px;
    margin: 10px 0px;
    padding-bottom: 0.3em;
    /* セクションの下パディング */
}

div#contactMenu h3 {
    width: 220px;
    text-align: left;
    line-height: 100%;
    border-left: 5px solid #add8e6;
    padding: 0 5px;
    margin: 3px 0 10px 10px;
    font-size: 120%;
}

div#contactMenu p {
    margin-bottom: 15px;
    /* 段落の下マージン（上書き） */
    margin-left: 15px;
}

div#contactMenu p#con {
    margin-bottom: 0px;
    padding: 0;
}

div#contactMenu p.tel {
    margin-bottom: 10px;
    /* 段落の下マージン（上書き） */
    font-size: 150%;
    /* 電話番号の文字サイズ */
    font-weight: bold;
    /* 文字の太さ（太字） */
    color: #2b2b2b;
    /* 電話番号の文字色 */
}

/*----▲サイドメニューの設定---*/

/* 事業部案内の展示情報のリスト設定*/
dl.list {
    border: none;
    /* センタリング */
    overflow: hidden;
}

dl.list dt {
	/* 日付エリアの幅 */
	float: left;
	font-size: 1.2rem;
	padding: 2px 5px 0px 0px;
	/* 行の高さ */
	text-align: left;
	line-height: 1.5;
}

/* 本文エリア */
dl.list dd {
	font-size: 1.5rem;
	padding: 10px 0px 10px 6em;
	/* 本文エリアのパディング（上右下左） */
	line-height: 1.5;
	/* 行の高さ*/
	margin: 0;
	border-bottom: 1px #c0c0c0 dotted;
	/* 本文エリア下境界線 */
	text-align: left;
}

/*アクセスページの設定*/

p.ac {
    margin: 30px 40px;
}

/*ページのトップに戻るの設定*/
a.return {
    float: right;
    text-decoration: none;
    color: #000000;
    margin: 0 60px 1em 0;
}


/*---▲下層ページの設定終了--*/

@media(max-width: 820px) {
    #sectionRight {
        width: 80%;
        margin: 0 auto;
    }   
    div#sectionLeft {
        width: 18%;
    }    
}
@media(max-width: 420px) {
    #sectionRight {
        float: none;
        width: 90%;
        margin: 0 auto;
    }   
    #contentsArea {
        width: 100%;
        padding-top: 100px;
        margin-top: -100px;
    }
     #sideMenu{
        display: none;
     }
     div.baseBox {
        width: 100%;
        height: auto;
        background-color: #ffffff;
        padding: 1em 5px;
        margin: 1em 0;
        overflow: hidden;
    }
    div#pageTitle {
        width: 100%;
        height: 50px;
        border: 3px solid #f0f0f0;
        background-color: #ffffff;
        margin: 0;
        padding: 0.5em 10px 0.5em 20px;
    }
    dl.list dt {
	/* 日付エリアの幅 */
	float: none;
	padding: 4px 0 5px 3px;
	/* 日付エリアのパディング（上右下左） */
	line-height: 14px;
	/* 行の高さ */
	text-align: left;
	margin: 0;
	width: 100%;
	font-size: 14px;
    }
	dl.list dt img{
	padding-left: 5px;
	vertical-align: middle;
	}
    dl.list dd {
        padding: 4px 3px 5px 0;
        /* 本文エリアのパディング（上右下左） */
        line-height: 1.6;
        /* 行の高さ*/
        margin: 0;
        border-bottom: 1px #c0c0c0 dotted;
        /* 本文エリア下境界線 */
        text-align: left;
        overflow-wrap: break-word;
        align-items: center;
    }
    dl.list dd img{
        display: block;
        margin-left: 1em;
    }
    dl.list {
        width: 100%;
        height: auto;
        border: none;
        margin: 0 auto;
        /* センタリング */
        overflow: hidden;
    }
    a.return {
        float: right;
        text-decoration: none;
        color: #000000;
        margin: 1em;
    }
    
}
#pageTitle{
	font-size: 2.4rem;	
}
div.baseBox.mb100{
	margin-bottom: 100px;	
}
#first-view {
	height: calc(30vh + 120px);
	max-height: 350px;
	background-color: #3faea1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 60px;
}

.first-view-text {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 40px 0;
	text-align: center;
}

.first-view-text h1 {
	color: #fff;
	font-size: 5.6rem;
	line-height: 1.2;
	letter-spacing: .03em;
	text-align: center;
}
.first-view-text p {
	color: #fff;
	font-size: 1.8rem;
	margin-bottom: 20px;
	letter-spacing: .05em;
	line-height: 1.5;
	text-align: center;
}

/* ====================================
   ▼ スマートフォン表示の調整 (最大幅768px以下)
   ==================================== */
@media screen and (max-width: 768px) {
    /* ... (前回の #sectionRight, div.baseBox, p.balloon1, .list-check の設定) ... */

    /* ------------------------------------
       ▼ 画像が切れる問題の調整 (全画像対応)
       ------------------------------------ */
    /* コンテンツエリア内のすべての画像に適用 */
    #sectionRight img,
    img {
        /* 親要素の幅を超えないように、最大幅を100%に設定 */
        max-width: 100% !important; 
        /* 縦横比を保ちながら高さを自動調整 */
        height: auto !important;    
    }
    
    /* 埋め込み要素（YouTubeなどのiframeや動画）もはみ出す可能性があるため、同様に調整 */
    iframe, 
    video {
        max-width: 100% !important;
        height: auto !important;
    }
}