@charset "UTF-8";

@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
src: url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
src:url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
src:url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'font_woff';
font-style: normal;
font-weight: 400;
src: url(https://meteorelay.jp/services/fonts/slick.woff) format('woff');
font-display: swap;
}

/* Reset */
*,*:before,*:after {box-sizing: border-box;}

ul {list-style:none;}
ul,li {margin:0; padding:0;}

ol {padding:0 0 0 0.25em; margin:0 0 1em 1.5em;}
ol li {margin-bottom:0.5em;}

a {color:#000; text-decoration:none; outline:none;}
img {vertical-align:middle;}

dl,dt,dd {margin:0;}

address,caption,em,th {font-style:normal;}

/* Fluid-img */
img {width:100%; height:auto;}

/* Fluid-img 解除 */
.image2  {text-align: center;}
.image2 img.img_d{width:100%; height:auto;}
.image2 img.img_d02 {width:auto !important; height:auto;}

/* --------------------------------------------------
	ベース
-------------------------------------------------- */
html {color:#222; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;font-weight: 500;font-size:3.733vw; line-height:1.5; height:100%;}/* 基準フォントサイズは14px */

/* BODY */
body {padding-top:28vw; color: #2b2d42; margin: 0;}
body.fixing-body {position: fixed; width:100%; height:100%;}
body#home {background-image: url(../images/bg_top_sp.png); background-size: cover; background-repeat: no-repeat;}
body#lower {background-image: url(../images/bg_lower_sp.png); background-size: contain; background-repeat: no-repeat;}

/* 下層コンテンツ */
#wrap {margin:0 2.67vw;}
#main_cont {width:100%; margin-bottom:2em;}
#side_cont {display:none;}

/* --------------------------------------------------
	共通
-------------------------------------------------- */
/* PC用のもは非表示 */
.pc_only {display:none !important;}

/* 見出し一旦クリア */
h1,h2,h3,h4,h5,h6 {margin:0 0 0.5em; font-size:1em;}

/* 段落 */
p {margin:0 0 0.75em;}

/* ゴシック体 */
.sanserif {font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, Helvetica, sans-serif;}

/* 明朝体 */
.serif {font-family:“ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “游明朝”, YuMincho, "Sawarabi Mincho", “ＭＳ Ｐ明朝”, “MS PMincho”, serif;}

/* 丸ゴシック体 */
.marugothic {font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";} 

/* 文字サイズ */
.small { font-size: 0.8em;}

/* セクション見出し & ページタイトル */
#page_ttl,.sec_ttl {text-align:center; letter-spacing:0.2em; margin-bottom:1.5em; position:relative; line-height: 1.8}

#page_ttl:before,.sec_ttl:before {content:''; background-image: url(../images/tti_icon_01.png); background-repeat: no-repeat; width: 22px; height: 20px; position:absolute; top:0.4em; left:8%; display:block;}
#page_ttl:after,.sec_ttl:after {content:''; background-image: url(../images/tti_icon_01.png); background-repeat: no-repeat; width: 22px; height: 20px; position:absolute; top:0.4em; right:8%; display:block;}

#page_ttl h2,.sec_ttl h2 {font-size:1.2em;font-style: italic;margin-bottom:0; display:inline-block;padding:0 1em; position:relative; z-index:1;}
#page_ttl h1,.sec_ttl h1 {margin-bottom:0; font-weight: normal;font-size:0.875em;}


/* 写真・図版 */
figure {margin:0;}

/* インデント */
.indent {text-indent:-1em; margin-left:1em;}

/* クリアフィックス */
.clearfix:after {content: ""; clear: both; display: block;}

/* ノーマルリスト */
.normal_list {list-style:disc; margin-left:1.5em; margin-bottom:1em;}
.normal_list.square {list-style:square;}
.normal_list.decimal {list-style:decimal;}
.normal_list li {margin-bottom:1em;}

/* 注意書きリスト */
.caution_list {margin-bottom:1em;}
.caution_list li {text-indent:-1em; margin-left:1em;}
.caution_list li:before {content:"※";}
.caution_list li ul {margin-top:0.5em;}
.caution_list li li {text-indent:0; margin-left:0;}
.caution_list li li:before {display:none;}

/* インラインブロック（ウインドウ幅によって途中で改行される場合にキレのいいところで改行させるため） */
.inline_block {display:inline-block;}

/* Flexboxレイアウト */
.flex {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between;}

/* ページャー */
.pageing {width:100%; margin:3vw 0;}
.pageing ul {-webkit-justify-content: center; justify-content: center; align-items: center;}
.pageing li {display:block;line-height:1; margin-right:5px;display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: center; font-size: 90%; font-weight: bold;}
.pageing li:last-child {margin-right:0;}
.pageing li a {display:block; padding:0.8em;}
.pageing li.number td a{ display: block; border: 1px solid #004063; color: #004063;}
.pageing li.number td a:hover{ background:#004063; color: #fff;}
.pageing li.number td a.on{ background:#004063; color: #fff;}

/*ボタン*/
/*紺の枠＋紺字 → ホバー紺背景＋白字*/
.btn10{display:block;text-align: center;background-color:#fff;border: 1px solid #004063;color: #004063;text-decoration: none;padding:0.5vw 5.5vw;margin: 1vw auto 2vw;}
.btn10:hover {color:#fff;background-color:#004063;}
.btn10:hover:after {font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f30b"; margin-left:0.5em; color: #fff;}
/*紺背景＋白字 → 紺の枠＋白背景アルファ0.3*/
.btn10_2{display:block;text-align: center;background-color:#004063;border: 1px solid #004063;color: #fff;text-decoration: none;padding:2vw 5.5vw;margin: 1vw auto 2vw;}
.btn10_2:hover {color:#004063;background-color:rgba(255,255,255,0.3);}
.btn10_2:hover:after {font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f30b"; margin-left:0.5em; color: #004063;}


.btn20 {display: inline-block;text-align: center;background-color: #004063;border: 1px solid #004063;color: #004063;text-decoration: none;font-weight: bold;padding:1vw 5.5vw;border-radius: 4px;position: relative; margin: 4vw auto;font-size: 0.75em;}
.btn20 span {position: relative;z-index: 1;}
.btn20:before,.btn20:after {content: "";display: block;background-color: #fff;width: 50%;height: 100%;position: absolute;top: 0;transition: .2s;}
.btn20:before {left: 0;}
.btn20:after {right: 0;}
.btn20:hover:before,.btn20:hover:after {width: 0;background-color: #fff;}
.btn20:hover {color: #FFF;}

.btn_area{ text-align: center;}
.btn_area li a{ width: 60%; padding: 20px 0;}

.more{ margin: 3vw auto 0; text-align: center;}

/*文字位置*/
.center{ text-align: center;}

/*文字太さ*/
.bold{ font-weight: bold;}

/*文中リンク*/
.for{color: #0E4E77; margin: 0 1%;}
.for:after {font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f35a"; margin-left:0.5em;}

.forpdf{color: #0E4E77; margin: 0 1%;}
.forpdf:after {font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f1c1"; margin-left:0.5em; color: #C1272A;}

/*iframe*/
iframe{ width: 100%; height: 60vw;}

/* --------------------------------------------------
フォーム
-------------------------------------------------- */
/* 入力エリア */
input,input[type="search"],textarea {/*-webkit-appearance: none;*/ background-color:#fff; border:1px solid #ccc; border-radius:4px; padding:8px; /*width:100%;*/ box-sizing:border-box; line-height:1.4;}
textarea {height:10em; width: 100%;}
::-webkit-input-placeholder {color:#999;}

input[type="text"]{width: 100%;}
input[type="checkbox"]{transform: scale(1.4);}

input.number{width: 20% !important;}

input[type="submit"]{
    display: inline-block;
    padding: 1em 2em;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
    color: #FFF;
    background-image: -webkit-linear-gradient(45deg, #2E8BC0 0%, #B1D4E0 100%);
    background-image: linear-gradient(45deg, #2E8BC0 0%, #B1D4E0 100%);
    transition: .4s;
    border: none;
    cursor: pointer;
    font-size: 1em;
}

input[type="submit"]:hover{
    background-image: -webkit-linear-gradient(45deg, #145DA0 50%, #2E8BC0 100%);
    background-image: linear-gradient(45deg, #145DA0 50%, #2E8BC0 100%);
}

select{width:100%; background:#fff; border:#ccc 1px solid; padding:4px;box-sizing:border-box; border-radius:4px; margin: 0 0 2%;}

/*セレクトボックス　デザイン
.grp_select01 {
	overflow: hidden;
	width: auto;
	margin: 0 0 2%;
	text-align: center;
}
.grp_select01 select {
	width: auto;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.grp_select01 select::-ms-expand {
    display: none;
}
.grp_select01.cp_sl01 {
	position: relative;
	border: 1px solid #bbbbbb;
	border-radius: 2px;
	background: #ffffff;
}
.grp_select01.cp_sl01::before {
	position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.grp_select01.cp_sl01 select {padding: 8px 38px 8px 8px;color: #666666;}*/

label {position: relative;}
label:after {
	position:absolute;
	top:30%;
	right: .5em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid #666;
	pointer-events: none;
}

/* formstyle01 */
.formstyle01 dt{ margin: 0 0 0.6% 0; font-weight: bold;}
.formstyle01 dt:before { content: '●'; color:#73C2B5; position:relative; margin: 0 5px 0 0; font-size: 80%;}
.formstyle01 dd{ margin:0 0 2.4% 0;}

/* submitボタン */
button {border:none;background-image: url(../images/btn_more.png); background-repeat: no-repeat; background-size: contain; border-radius:2px; }
button a {display:inline-block; color:#fff; line-height:1; padding:0.7em 2.6em;}
button a i { margin: 0 1vw 0 0;}
button:hover{background-image: url(../images/btn_more_off.png);}

/* 説明エリア */
.inst01{ display: block; padding: 2%; background: #F8FAFC; font-size: 0.96em; border-radius: 4px;}

.submit{ width: 50%; margin: 0 auto; text-align: center;}
.backbtn {margin: 2% auto;}
.backbtn a{
    display: block;
	width: 100%;
	text-align: center;
    padding: 1em 2em;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
    color: #FFF;
    background-image: -webkit-linear-gradient(45deg, #DEE2EC 0%, #E2E4E7 100%);
    background-image: linear-gradient(45deg, #DEE2EC 0%, #E2E4E7 100%);
    transition: .4s;
    border: none;
    cursor: pointer;
    font-size: 1em;
	color: #777 !important;
}
.backbtn a:hover{
	background-image: -webkit-linear-gradient(45deg, #E2E4E7 50%, #DEE2EC 100%);
    background-image: linear-gradient(45deg, #E2E4E7 50%, #DEE2EC 100%);
}

.sendpage_btn {margin: 2% auto;}
.sendpage_btn a{
    display: block;
	width: 100%;
	text-align: center;
    padding: 1em 2em;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
    color: #FFF !important;
    background-image: -webkit-linear-gradient(45deg, #2E8BC0 0%, #B1D4E0 100%);
    background-image: linear-gradient(45deg, #2E8BC0 0%, #B1D4E0 100%);
    transition: .4s;
    border: none;
    cursor: pointer;
    font-size: 1em;
}
.sendpage_btn a:hover{
	background-image: -webkit-linear-gradient(45deg, #145DA0 50%, #2E8BC0 100%);
    background-image: linear-gradient(45deg, #145DA0 50%, #2E8BC0 100%);
}

.red{color: #c02e5e;}

/* --------------------------------------------------
	モーダル表示（共通）
-------------------------------------------------- */
.modal-btn {cursor:pointer;}

/* モーダル表示時の背景 */
#modal-overlay {
    position: fixed;
    top: 0;
    z-index: 950;
    display: none;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.85);
}
#modal-overlay1:before {content:url(../images/modal_close.png); position:absolute; top:10px; right:10px; cursor:pointer;}

/* モーダルを閉じるボタン（モーダルがウインドウに収まる場合） */
.close_modal {display:none; position:fixed; width:40px; height:40px; cursor:pointer; z-index:1000;}
.close_modal .close_btn {display:block; position:absolute; top:50%; left:0; width:100%; height:1px; background-color:#fff; 
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.close_modal .close_btn:after {content:""; display:block; width:100%; height:100%; background-color:inherit;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}

/* モーダルを閉じるボタン（モーダルがウインドウに収まらない場合） */
.close_modal_nofit {display:none; position:fixed; top:0; right:0; width:30px; height:30px; cursor:pointer; z-index:1000;}
.close_modal_nofit .close_btn {display:block; position:absolute; top:15px; left:0; width:30px; height:1px; background-color:#fff; 
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.close_modal_nofit .close_btn:after {content:""; display:block; width:100%; height:100%; background-color:inherit;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}

/* モーダルターゲット共通 固定・消去など */
.modal-content {display:none; position:fixed; background:#fff; width:80%; z-index:1000; overflow-y:auto; overflow-x:hidden;} 


/* --------------------------------------------------
	固定ヘッダ＋Gナビ
-------------------------------------------------- */
#fixed_box {width:100%; position:fixed; top:0; left:0; /*background-color:#fff;*/ z-index:101; transition: all 0.25s ease;}
.is-fixed #fixed_box {box-shadow: 0 5px 5px 0 rgba(0,0,0,0.05); width: 100%; position: relative;}

/* --------------------------------------------------
	ヘッダ
-------------------------------------------------- */
/* ヘッダー */
#header {width:100%; height:24vw; line-height:1; z-index:100; position:relative; font-style: italic;}
.is-fixed #header {height:16vw; background: #fff;}
#main_head h1 {position:absolute; top:4.67vw; left:4.67vw; width:30.33vw; margin:0;}
#main_head .coupon {position:absolute; bottom:1vw; left:0; width:100%; -webkit-order:1; order:1; background:url(../images/bg_pattern02.png) repeat-x,url(../images/bg_pattern03.png) repeat-x left bottom,url(../images/bg_pattern01.png); background-size:14.5px 1px,14.5px 1px,6px 6px; font-size:0.8em; text-align:center; line-height:2.5;}
.is-fixed #main_head .coupon {display:none;}
#main_head .coupon h2 {display:inline; margin-right:0.5em;}
#main_head .coupon p {display:inline;}
#main_head .coupon p .tax {font-size:0.9em;}
#main_head .coupon p strong {color:#a03025;}
#main_head .coupon p.caution {display:none;}
#main_head .store_cntrol {position:absolute; top:2.67vw; left:24vw; width:58.4vw;}
#main_head .store_cntrol nav,#header .store_cntrol .cart {width:100%;}
#main_head .store_cntrol .cart li {width:49%;}
#main_head .store_cntrol .cart a {display:block; background:url(../images/bg_pattern01.png); background-size:6px 6px; border-radius:10vw; line-height:10vw; text-align:center; color:#a03025; font-weight:bold;}

/* メニュートグル＆ハンバーガーアイコン */
.drawer_toggle {position:absolute; top:3.67vw; right:3.67vw; width:6.67vw; height:8vw; cursor:pointer;}
.drawer_toggle span {display:block; position:absolute; top:calc(50% - 1px); left:0; content:""; width:100%; height:2px; background-color:#333; transition: all 0.25s ease;}
.drawer_toggle span:nth-child(1) {margin-top:-35%;}
.drawer_toggle span:nth-child(3) {margin-top:35%;width:4.67vw; text-align: right;}

/* メニュートグル＆クローズアイコン */
.open .drawer_toggle span:nth-child(2) {display:none;}
.open .drawer_toggle span:nth-child(1) {margin-top:0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.open .drawer_toggle span:nth-child(3) {margin-top:0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
width:6.67vw;
}


/* --------------------------------------------------
	Gナビ
-------------------------------------------------- */
#g_navi {display:none; position:fixed; top:0; left:0; width:100%; height:100%; padding-top:24vw; overflow-y:auto; text-align:center; z-index:98;}
#g_navi .layer {position:absolute; top:0; left:0; display:block; width: 100%; height:100%; background-color:rgba(255,255,255,0.94);}
#g_navi nav{ width: 100%;}
#g_navi h1{display: none;width:260px;margin: 0;}
#g_navi ul {width: 100%; position:relative; z-index:99; box-shadow: none;}
#g_navi li { display: block; width: 100%; font-size:1.1em; text-align:center; font-style: italic;}
#g_navi li em {display:none;}
#g_navi li a { display: block;padding: 26px 0;}
#g_navi li a span {display:block; color:#666; font-size:0.6em; font-weight:normal;}


/* --------------------------------------------------
	ページトップ
-------------------------------------------------- */
#backToTop {position:fixed; right:20px; bottom:20px; cursor:pointer; transition: all 0.25s ease; z-index:1;text-align: center;background:#004063; color: #fff; font-size: 0.875em;text-align: center; padding: 10px;}
#backToTop i{ display: block;margin: 0 0 5px;}


/* --------------------------------------------------
	フッター
-------------------------------------------------- */
#footer {background:url(../images/bg_pattern04.png); background-size:cover; background-repeat: no-repeat; padding:10vw 0 30vw; background-position: right;}

/* フッタナビ共通  */
#footer_navi > div {width:100%;}
#footer_navi .about,#footer_navi .etc{width:48%;}
#footer_navi {width:80%; margin: 0 auto;}
#footer_navi h3 {margin: 1.2vw 0; font-weight: normal;}
#footer_navi ul {margin-bottom:2em;}
#footer_navi li {margin-bottom:0.75em;}
#footer_navi li:last-child {margin-bottom:0;}

#footer_navi .about li { text-align: center;}

#footer_navi .location {}
#footer_navi .location h2:before {display:none;}
#footer_navi .location li {font-size:0.8em; margin-bottom:0.5em; text-indent:-1em; margin-left:1em;}
#footer_navi .location .pan,#footer_navi .location .pan ul:first-child {margin-right:0.5em;}
#footer_navi .location02{ text-align: center;}
#footer_navi .location02 h1{ width: 50%; margin: 4vw auto;}

#footer_navi .etc {}
#footer_navi .etc li { text-align: center;}
#footer_navi .etc li:nth-child(odd) {margin-right:0.5em;}

/* コピーライト */
#footer .copyright {text-align:center; margin: 4vw 0 0; font-size: 0.7em;}


/* --------------------------------------------------
	トップページ
-------------------------------------------------- */
#top_contents {margin:0;}
#top_contents > section {margin-bottom:10vw;}

/* メインビジュアル */
#top_mv {position:relative;}
#top_mv .lead {width:84vw; margin:0 auto; padding:3.25em 0 4.75em; letter-spacing:0.125em;}
#top_mv .lead h1 {font-size:1.1em; margin-bottom:0.25em; font-family:“ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “游明朝”, YuMincho, "Sawarabi Mincho", “ＭＳ Ｐ明朝”, “MS PMincho”, serif;}
#top_mv .lead p {font-size:0.7em;}


/* リスト共通（下層も共通） */
.item_list .item {width:48%; margin-bottom:1em;}
.item_list .item .photo,.item_list .item .data {width:100%; margin: 0 0 1vw;}
.item_list .item .status {margin-bottom:0.2em;}
.item_list .item .status img {width:auto; height:1.1em; margin-right:2px;} 
.item_list .item h3,.item_list .item .price {font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, Helvetica, sans-serif;}
.item_list .item h3 {font-size:0.98em;font-family:“ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “游明朝”, YuMincho, "Sawarabi Mincho", “ＭＳ Ｐ明朝”, “MS PMincho”, serif; margin: 0 0 0.2em}
.item_list .item h3 span {display:inline-block;}
.item_list .item .sub{font-style: italic; font-size: 0.86em}
.item_list .item .price {color:#369959; font-size:0.857em; font-weight:bold;}
.item_list .item .price span {display:inline-block;}
.item_list .item .price em {font-size:1.167em;}
.item_list .item .comment {margin-bottom:0; font-size: 0.76em;}

.item_list .item .ttl {position: relative; padding: 0; height: auto; text-align: center; width: 100%;}
.item_list .item .ttl01:before{ content: ''; background-image: url(../images/ttl_reco_icon01.png); background-repeat: no-repeat; width: 60px; height:50px; background-size: contain; display:inline-block;position: relative;top:0; text-align: center;}
.item_list .item .ttl02:before{ content: ''; background-image: url(../images/ttl_reco_icon02.png); background-repeat: no-repeat; width: 60px; height:50px; background-size: contain; display: inline-block;position: relative;top:0;}	
.item_list .item .ttl03:before{ content: ''; background-image: url(../images/ttl_reco_icon03.png); background-repeat: no-repeat; width: 60px; height:50px; background-size: contain; display: inline-block;position: relative;top:0;}
.item_list .item .ttl04:before{ content: ''; background-image: url(../images/ttl_reco_icon04.png); background-repeat: no-repeat; width: 60px; height:50px; background-size: contain; display: inline-block;position: relative;top:0;}	
.item_list .item .btn{ width: 100%;}
.item_list .item .btn a{ display: block; width: 80%; padding:0.8vw 0; background-image: url(../images/btn_more.png);background-repeat: no-repeat; background-size: cover; margin: 4vw auto 5.2vw; color: #fff; text-align: center;}
.item_list .item .btn a:hover{background-image: url(../images/btn_more_off.png);background-repeat: no-repeat; background-size: contain;color:#3F3F3F;}	

/* Service 私たちのサービス */
#top_recommend{ margin: 0 3.2vw;}

/* 最新情報 */
#top_news{ padding: 6vw 0 0; background-image: url(../images/bg_top_news.png); background-repeat: no-repeat; background-size:contain;}
#top_news dl {margin:0 6vw;}
#top_news dt{width:100%; border-bottom: none; padding: 2vw 0;}
#top_news dd {width:100%; border-bottom: 1px dotted #ccdbdc; padding:0 0 2vw;font-size:0.857em;}
#top_news dt {font-size:0.857em;}
#top_news dd {/*margin-bottom:1.8em;*/}
#top_news dt span { display:inline-block;width: 18vw; padding: 3px 0; text-align: center;margin: 0 10px 0 0; color: #fff; font-size:90%;}
#top_news dt span.cat01 { background:#34ccc7;}
#top_news dt span.cat02 { background:#80ced7;}
#top_news dt span.cat03 { background:#8d99ae;}
#top_news dt span.cat04 { background:#004063;}
#top_news dt span.cat05 { background:#34ccc7;}

/* キャンペーン・特集 */
#top_pickup {padding:2vw 0; background-image:url(../images/bg_discription.png); background-size: contain;}
#top_pickup .top_pickup_inner{background:rgba(0, 64, 99, 0.7) ; padding: 4vw 0;}
#top_pickup .sec_ttl {margin-bottom:3em;}
#top_pickup .pickup_list {color: #fff; margin: 0 5.2vw; font-size:0.857em; line-height: 1.8;}
#top_pickup .pickup_list strong { text-decoration: underline;}

/* サイト制作・システム構築プラン */
#top_plan{ padding: 0 5.2vw;}

/* --------------------------------------------------
	下層ページ共通
-------------------------------------------------- */
#contents,#contents02 {margin:0;}
#contents > section {margin-bottom:12.125vw;}
#contents02 > section {margin-bottom:12.125vw;}

/* パンクズリスト  */
#breadcrumb {margin:1em 2.67vw 0; color:#333;}
#breadcrumb ul {-webkit-justify-content:center; justify-content:center;}
#breadcrumb li {font-size:0.857em; margin-right:0.5em;}
#breadcrumb li a {color:#333;}
#breadcrumb li a:after {font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f105"; margin-left:0.5em;}

/* 見出し  */
#contents .page_caption,#contents02 .page_caption{font-size:1.4em; font-weight: bold; text-align: center; line-height: 2em; padding: 3.6vw 0; font-family:“ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “游明朝”, YuMincho, "Sawarabi Mincho", “ＭＳ Ｐ明朝”, “MS PMincho”, serif;}
/* ページ見出し h2 */
#contents h2.title01,#contents02 h2.title01{position: relative;margin:4vw 0 4.6vw;text-align: center;font-size: 1.6em;color: #2b2d42;}
#contents h2.title01:before,#contents02 h2.title01:before{content: '';position: absolute;bottom: -2vw;display: inline-block;width: 60px;height: 2px;left: 50%;-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);background-color: #80ced7;border-radius: 6px;}
/* ページ見出し h3 */
#contents h3.title02,#contents02 h3.title02{position: relative;display: inline-block;padding: 0 2.5em;margin:4vw 0 4.6vw;text-align: center;font-size: 1.6em;color: #2b2d42; width: 100%;}
#contents h3.title02:before, #contents h3.title02:after,
#contents02 h3.title02:before, #contents02 h3.title02:after{content: '';position: absolute;top: 50%;display: inline-block;width: 15%;height: 1px;background-color: #7ED1E6;}
#contents h3.title02:before,#contents02 h3.title02:before {left:0;}
#contents h3.title02:after,#contents02 h3.title02:after {right: 0;}
/* ページ見出し h4 */
#contents h4.title04,#contents02 h4.title04{ width: 100%; margin:0; font-size: 1.6em; position:relative; font-weight:normal; margin-bottom:15px; border-radius:2px; padding:.5em; line-height:2.1em;}
#contents h4.title04:after,#contents02 h4.title04:after {content: "";display: block;height: 2px;background-image: linear-gradient(to right, #73C2B5, #7ED1E6);}
#contents h4.title04 .head_point,#contents02 h4.title04 .head_point {background-color:#73C2B5;border-radius:100%;padding:5px 10px;font-size:1em;color: #fff;margin-right: 5px;}
/* ページ見出し h5 */
#contents h5.title05,#contents02 h5.title05 { width: 100%; font-size: 1.1em;}
#contents h5.title05:before,#contents02 h5.title05:before { content: '●'; color:#73C2B5; position:relative; margin: 0 10px 0 0; font-size: 80%;}

#contents .page_caption2,#contents02 .page_caption2{font-size:1em; font-weight: bold; text-align: center; line-height: 1.8em; padding: 3.6vw 0; font-family:“ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “游明朝”, YuMincho, "Sawarabi Mincho", “ＭＳ Ｐ明朝”, “MS PMincho”, serif;}

/* ページ見出し */
.lower_ttl{ margin: 0 2.6vw;}

/* 横幅100%　背景グレー */
#pickup {padding:10vw 0 6vw; background: #f5f5f5;}
#pickup .pickup_inner{padding: 4vw 0;}
#pickup .sec_ttl {margin-bottom:3em;}
#pickup .pickup_list {color: #fff; margin: 0 5.2vw; font-size:0.857em; line-height: 1.8;}
#pickup .pickup_list strong { text-decoration: underline;}

/*波線*/
.stripe{ position: relative;padding: 0.3em;}
.stripe:after {content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 7px;background: repeating-linear-gradient(-45deg, #D6E6EB, #D6E6EB 2px, white 2px, white 4px);}

/*マーカー*/
.marker{ background:linear-gradient(transparent 75%, #ffc0cb 75%); font-weight: bold;}

/*リード文　ポイント*/
.lead_p:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f0a4"; border: 1px solid #1F3373; border-radius: 100%; padding: 10px; margin: 0 10px 0 0;}


#lower_navi{
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 2% 1% 2% 2%;
    width: 18%;
    z-index: 10000;
    background: rgba(0, 64, 99,0.6);
}
#lower_navi li a{ color: #fff; display:block; padding: 1.8% 0;}	
#lower_navi li a:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f105"; margin: 0 10px 0 0; font-size: 80%;}
#lower_navi li a:hover{ padding: 1.8% 0 1.8% 1.2%;}	
#lower_navi .title00{ display:block; margin: 0 0 1vw; color:rgba(0, 64, 99,1);}	
	
	
/* --------------------------------------------------
	Service サービス内容
-------------------------------------------------- */	
/* Works 導入事例*/
.works {max-width:1000px; margin:0 auto; padding:0 20px;}
.works .item_list .item {width:30%; box-shadow: 2px 2px 4px #ccc;}
.works .item_list .item .photo { height:200px; overflow:hidden; margin-bottom:0;}
.works .item_list .item:last-child {display: none;}

/* --------------------------------------------------
	Web WEBサイト制作・モバイル制作
-------------------------------------------------- */
/* リード */
.sec_box{ margin: 0 2.6vw;}
.sec_box p {margin:1em 0.6em 2em; line-height: 1.65em;}
.sec_box a{ color: #0C3B88;}

/* サイト制作の流れ */
.sec_box .flow{ display: table; width: 100%; margin: 0 0 6vw;}
.sec_box .flow dt{ display: table-cell; padding: 10px 20px; border: 1px solid #2b2d42; color:#fff; background:#2b2d42; margin: 0 20px 0 0; vertical-align: middle;}
.sec_box .flow dd{ display: table-cell; border: 1px solid #2b2d42; padding: 20px; vertical-align: middle;}
.sec_box .flow dd:after{ text-align: center; font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f107"; font-size: 1em; position: relative; bottom: -45px; display: block;}
.sec_box .flow.last dd:after{ display: none;}

/* ポイント */
.sec_box .point {width:47%; background:url(../images/bg_pattern11.png); margin-bottom:2em; padding:1em 0.75em; position:relative;} 
.sec_box .point .num {display:inline-block; position:absolute; top:-1em; left:50%;  -webkit-transform: translateX(-50%);  transform: translateX(-50%); background-color:rgba(124,165,40,0.75); font-size:0.86em; color:#fff; line-height:1; padding:0.5em 1em;}
.sec_box .point .title {height:18vw; border-bottom:1px solid #707070; margin-bottom:0.75em; position:relative;}
.sec_box .point .title h2 {position:absolute; top:50%; left:50%; width:100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color:#a03025; font-size:1.25em; font-weight:normal; text-align:center; line-height:1.3;}
.sec_box .point .title h2 span {display:block; font-size:0.75em;}
.sec_box .point p {font-size:0.9em; color:#666;}

/* --------------------------------------------------
	Works 実績紹介
-------------------------------------------------- */
.tabbtn{ justify-content: center; margin: 0 0 4vw;}
.tabbtn li{ margin: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center ;align-items: center; background:#2b2d42; width:33.3%; background: #f5f5f5; color: #2b2d42; font-size: 0.8em; border: 1px solid #fff;}
.tabbtn li.current{ background:#2b2d42; color: #fff;}
.tabbtn li a{ display: block; width: 100%; padding: 1% 0; text-align: center;}
.tabbtn li.current a{ color: #fff;}
.tabbtn li a:after { display: block;font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f107";}
.tabbtn li:last-child{width:100%;}

.list_arrow01 li{ margin: 0 0 2px; width: 100%}
.list_arrow01 li a{ display: block;  width: 100% ; position: relative; padding: 1.1em 1em; background:#f9f9f9;}
.list_arrow01 li a:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f105"; margin: 0 0 0 10px; position: absolute; right: 1em}


.sapp .item_list{ justify-content: flex-start !important; -webkit-justify-content: flex-start; }
.sapp .item_list .item{ margin-right: 2vw;}
.sapp .item_list .item:nth-child(2n){ margin-right:0;}

/* --------------------------------------------------
	System システム開発　System Integrator& Structure
-------------------------------------------------- */
#main_system .item_list .item{ width: 46%;}
#main_system .item_list:before,#main_system .item_list:after{ display: none;}

/* --------------------------------------------------
	特徴　services/ad.php
-------------------------------------------------- */
.service_list li{ display: block; width: calc(90%/4); text-align: center; align-items: center; word-break: break-all; justify-content: center; display: flex;}
.service_list li a{ display: block; width: 100%; background:#ECECEC; text-align: center; padding: 20px 0;}
.service_list li a:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f105"; position: relative; right: -10px;}
.service_list li a:hover{ color:#21477F; background:#D6E6EB}


/* --------------------------------------------------
	WEBサイト制作の流れ　web/flow.php
-------------------------------------------------- */
.flow-services{}
.flow-services li dt{ display: block; text-align: left;/*color:#145DA0;*/ margin: 0; padding:10px 0; font-size: 110%; font-weight: bold; background:#E1ECF1}
.flow-services li dt span{ text-align: center; color:#fff; background: #41729F; font-weight: bold;padding: 8px; margin: 0 1% 0 0; font-size: 80%;}
.flow-services li dd{ padding: 2% 6%; }
.flow-services li {position: relative;display: block;margin:0;padding:0 0 2%;;max-width: 100%;color: #555;font-size: 16px;background: #FFF;box-sizing: border-box;}


/* --------------------------------------------------
	 table
-------------------------------------------------- */
/*グレー＋白 center*/
.type3 { width: 100%; border-collapse:  collapse;}
.type3 tr:nth-child(odd) {background-color:#ECECEC;}
.type3 th,.type3 td {padding: 6px 10px; text-align: left;}

/*グレー＋白 center 50%/50%*/
.type3_2 { width: 100%; border-collapse:  collapse; margin: 0 0 4vw}
.type3_2 tr:nth-child(odd) {background-color:#ECECEC;}
.type3_2 th,.type3_2 td { width: 50%; padding: 6px 10px; text-align: center;}

/*グレー＋白 center 50%/50%*/
.type3_3 { width: 100%; border-collapse:  collapse; margin: 0 0 4vw}
.type3_3 tr:nth-child(odd) {background-color:#E7F6FC;}
.type3_3 th,.type3_3 td { width: auto; padding: 6px 10px; text-align: left;}

/*線＋白*/
.type4 {width: 100%;border: none;border-top: solid 2px #666;border-collapse: separate;border-spacing: 0 10px;margin: 0 0 4%;}
.type4 tr { padding: 1% 0;}
.type4 th {vertical-align: middle;width: 30%;border-right: solid 1px #666;margin: 0;text-align: center;color: #333;font-weight: bold;padding: 1%;border-bottom: solid 1px #666;}
.type4 td{margin: 0;border: none;text-align: left;vertical-align: middle;overflow: hidden;padding: 1% 2%;}

/*線＋白*/
.type4_2 {width: 100%;border: none;border-top: solid 2px #666;border-collapse: separate;border-spacing: 0 10px;margin: 0 0 4%;}
.type4_2 tr { padding: 1% 0;}
.type4_2 th {vertical-align: top;width: 30%;border-right: solid 1px #666;margin: 0;text-align: center;color: #333;font-weight: bold;padding: 1%;border-bottom: solid 1px #666;}
.type4_2 td{margin: 0;border: none;text-align: left;vertical-align: middle;overflow: hidden;padding: 1% 2%;}


/* --------------------------------------------------
	モバイルサイト制作　web/mobile.php
-------------------------------------------------- */
.mobile_scene li{ display: block; width: calc(98%/2); text-align: left; margin: 0 0 20px;border: 2px solid #ECECEC; padding: 20px;}
.mobile_scene li.item1 h4:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f1ad"; position: relative; margin: 0 10px 0 0;}
.mobile_scene li.item2 h4:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f291"; position: relative; margin: 0 10px 0 0;}
.mobile_scene li.item3 h4:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f029"; position: relative; margin: 0 10px 0 0;}
.mobile_scene li.item4 h4:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f3ff"; position: relative; margin: 0 10px 0 0;}
.mobile_scene li.item5 h4:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f3cd"; position: relative; margin: 0 10px 0 0;}
.mobile_scene li.item6 h4:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f2b6"; position: relative; margin: 0 10px 0 0;}


/* --------------------------------------------------
	Flash制作/CGI開発　web/flash.php
-------------------------------------------------- */
.flash_list{ width:100%;align-items: center;}
.flash_list li{ width:calc(100%/5); margin: 0 0 20px;}

/* --------------------------------------------------
	制作料金 / メニュー　web/menu.php
-------------------------------------------------- */
.menu_list{ width:100%;align-items: center;}
.menu_list li{ width:100%; margin: 0 0 20px; padding: 2%; background:#EFEFEF; border: none;}
.menu_list li:before{content:'●'; margin: 0 10px 0 0; color:#52B1C7; font-size: 70%;}
.menu_list li dl{width:50%;}
.menu_list li div{width:50%;}
.menu_list li dt{ font-weight: bold;}

.menu_list02{ width:100%;align-items: center;}
.menu_list02 li{ width:100%; margin: 0 0 20px; padding: 2%; background:#EFEFEF; border: none;}
/*.menu_list02 li:before{content:'●'; margin: 0 10px 0 0; color:#52B1C7; font-size: 70%;}*/
.menu_list02 li dl{width:50%;}
.menu_list02 li div{width:50%;}
.menu_list02 li dt{ font-weight: bold;}

/* --------------------------------------------------
	ECサイト構築　system/ec.php
-------------------------------------------------- */
.item1 li { display: block; border-bottom: 1px dotted #1F3373; padding: 1.6vw 0;}
.item1 li:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f0a4"; border: 1px solid #1F3373; border-radius: 100%; padding:0.5%; margin: 0 10px 0 0; background:#1F3373; color: #fff; }

/* --------------------------------------------------
	CMS構築　system/cms.php
-------------------------------------------------- */
.lead_box{ display: block; width:100%; text-align: left; margin: 0 0 20px;border: 1px solid #80ced7; padding: 2.6vw; background: rgba(128, 206, 215,0.2)}
.lead_box h4{ text-align: center; margin: 1vw 0 0; font-size: 1.2em;}

/* --------------------------------------------------
	映像配信　video/
-------------------------------------------------- */
.video_lead_box{ display: block; width:100%; text-align: left; margin: 0 0 20px;border: 1px solid #a09ced; padding: 2.6vw; background: rgba(160, 156, 237,0.2)}
.video_lead_box h4{ text-align: center; margin: 1vw 0 0; font-size: 1.2em;}

/* --------------------------------------------------
	共同運営　joint/
-------------------------------------------------- */
.joint_lead_box{ display: block; width:100%; text-align: left; margin: 0 0 20px;border: 1px solid #fcf6cf; padding: 2.6vw; background: rgba(252, 246, 207,0.2)}
.joint_lead_box h4{ text-align: center; margin: 1vw 0 0; font-size: 1.2em;}

/* --------------------------------------------------
	会社概要　compnay/
-------------------------------------------------- */
.com_photo_list{ width:100%;align-items: center;}
.com_photo_list li{ width:48%; margin: 1%;}

/*プライバシーポリシー*/
.privacy .item{ margin: 0 0 4vw;}
.privacy .item p{ margin: 0 !important;}

/*ニュース*/
.entry dl dt{ border-bottom: 1px solid #80ced7; font-size: 1.2em; text-align: center; padding: 10px 0; font-weight: bold;}
.entry p.day{ text-align: right; font-size: 0.9em;}
.entry dl dd p img{ width: 40%; height: auto; margin: 0 auto 4vw; display: block;}

/* --------------------------------------------------
	よくある質問・フォーム　support/
-------------------------------------------------- */
.category{ background:rgba(211, 236, 236,0.5); padding: 20px; border: 1px solid #D3ECEC;}
.category ul{ margin: 0; justify-content:flex-start;}
.category li{ margin: 0 10px 10px 10px;}
.category li:before{content:'●'; margin: 0 10px 0 0; color:#52B1C7; font-size: 50%;}

/*FAQ一覧*/
.faq_list dt{ border-bottom: 1px solid #D3ECEC; padding: 0 0 5px; margin: 0 0 10px; font-weight: bold;}
.faq_list dd ul li:before{content:'Q.'; margin: 0 10px 0 0; color:#52B1C7; font-size: 90%; font-weight: bold;}
.faq_list dd ul li{ padding: 5px 0;}

/*FAQ詳細*/
.faq_detail dt .question{font-weight: bold;}
.faq_detail dt .question:before{content:'Q.'; margin: 0 10px 0 0; color:#52B1C7; font-size: 90%;}
.faq_detail a{color: #0C3B88;}

/*相互リンク集・提携サイト*/
.link_list{ margin-bottom: 30px;}
.link_list dt{font-weight: bold; border-bottom:  1px solid #52B1C7; padding: 0 0 5px; margin: 0 0 10px;}
.link_list a{color: #0C3B88;}
.link_list dd{ margin: 0 0 10px; padding: 0.5% 1%;}
.link_list dd a:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f0c1"; font-size: 70%; margin: 0 5px 0 5px; color: #0C3B88;}
.link_list dd:nth-child(odd) {background-color:#f9f9f9;}

/*サイトマップ*/
.sitemap_list{ margin-bottom: 30px;}
.sitemap_list dt,.sitemap_list dd.type3 .left p{font-weight: bold; border-bottom:  1px solid #52B1C7; padding: 0 0 5px; margin: 0 0 10px;}
.sitemap_list a{color: #0C3B88;}
.sitemap_list dd{ margin: 0 0 10px; padding: 0.5% 1%;}
.sitemap_list dd.type3 .right li.type4{ border: none; margin: 0;}
.sitemap_list dd.type3{ width: 98%; margin: 0 0 0 auto;}

.sitemap_list dd ul{ justify-content:flex-start; align-items: center; display: flex;}
.sitemap_list dd li{ align-items: center; margin: 0 30px 20px 0;}
.sitemap_list dd li:before{content:'●'; margin: 0 5px 0 0; color:#52B1C7; font-size: 50%;}

.sendpage .home img{ width: auto; height: auto;}

/* --------------------------------------------------
	MarketingCMS　services/mcms.php
-------------------------------------------------- */
.mcms_list li{ display: block; width: calc(98%/3); text-align: left; margin: 0 0 20px;padding: 20px; background:#C3E0E5;}
.box_wrap{padding: 20px; background:#FBF6F3;}


/* --------------------------------------------------
	 768px〜　タブレット
-------------------------------------------------- */
@media print, screen and (min-width : 768px) {
	
html {font-size:15px;}

/* BODY */
body {padding-top:0;}
body.fixing-body {position:static; height:auto; top:auto !important;}
body.is-fixed {padding-top:300px;}
body#home {background-image: url(../images/bg_top_pc.jpg); background-size: contain; background-repeat: no-repeat;}
body#lower {background-image: url(../images/bg_lower.png); background-size: contain; background-repeat: no-repeat;}	
    
/* セクション */
section .inner {max-width:1200px; padding:0 50px; margin:0 auto;}

/* 下層コンテンツ */
#wrap {max-width:1000px; margin:0 auto; padding:0 20px;}
#main_cont {width:67%; max-width:640px;  margin-bottom:60px;}
#side_cont {width:28%; max-width:260px; margin-bottom:60px;}

/* --------------------------------------------------
	共通
-------------------------------------------------- */
a:hover {color:#bbb;}
a:hover img {opacity: 0.75;	filter: alpha(opacity=60); transition: all 0.25s ease;}

.sp_only {display:none !important;}
.pc_only {display:block !important;}
.pc_only.flex {display:-webkit-flex !important; display:flex !important;}

/* パンクズリスト */
#breadcrumb a:hover {color:#06b3aa;}
#breadcrumb li {font-size:0.875em;}

/* セクション見出し＆ページタイトル */
#page_ttl,.sec_ttl {margin-bottom:30px;}
#page_ttl:before,.sec_ttl:before {top:1.25em;left:14%;}
#page_ttl:after,.sec_ttl:after {right:14%;}	
#page_ttl h2,.sec_ttl h2 {font-size:1.75em;}
#page_ttl h1,.sec_ttl h1 {font-size:1.1em;}	

/* テーブル1 */
.tbl01 {border:none;}
.tbl01 tr {display:table-row; padding:0; border:none;}
.tbl01 th,.tbl01 td {display:table-cell; padding:1em; border:1px solid #ccc; vertical-align:top;}
.tbl01 th {white-space:nowrap;}
.tbl01 td {width:100%;}

/* ページャー */
.pager li a:hover { background-color:#ccc; color:#fff;}

/* dtをfloat leftする */
dl.dt_float:after {content:""; clear:both; display:block;}
dl.dt_float dt {clear:both; float:left;}

/* dtをfloat left したときの dd のパディングレフト */
.pdl5 dd {padding-left:5em;}
.pdl6 dd {padding-left:6em;}
.pdl7 dd {padding-left:7em;}
.pdl8 dd {padding-left:8em;}
.pdl9 dd {padding-left:9em;}
.pdl10 dd {padding-left:10em;}
.pdl11 dd {padding-left:11em;}
.pdl12 dd {padding-left:12em;}
.pdl13 dd {padding-left:13em;}
.pdl14 dd {padding-left:14em;}
.pdl15 dd {padding-left:15em;}
	
.btn20 {padding:0.5vw 5.5vw; margin: 2vw auto 4vw; font-size: 0.9em;}

/* Fluid-img 解除 */
.image2  {text-align: center;}
.image2 img.img_d {width:auto !important; height:auto;}
.image2 img.img_d02 {width:auto !important; height:auto;}

/*iframe*/
iframe{ width: 100%; height: 30vw;}
	
/*紺背景＋白字 → 紺の枠＋白背景アルファ0.3*/
.btn10_2{padding:0.5vw 5.5vw;}

/* --------------------------------------------------
	スクロールでGナビフェードイン
-------------------------------------------------- */
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* --------------------------------------------------
	固定ヘッダ＋Gナビ
-------------------------------------------------- */
#fixed_box {height:auto; position:static;}
#fixed_box .inner {max-width:1000px; margin:0 auto; padding:0 20px;}
#fixed_box .inner_max {max-width:100%; margin:0 auto; padding:10px 20px;}	

/* --------------------------------------------------
	ヘッダ
-------------------------------------------------- */
#header {height:auto; position:static; margin-bottom:30px;}
.is-fixed #header {display:none;}

/* サブヘッダー */
#sub_head {margin:40px 20px; padding-bottom:15px;}
#sub_head h1 {width:300px;}
#sub_head li{ margin: 0 2vw 0 0; width: 124px; letter-spacing: 0.1em; font-weight: bold;}	
#sub_head li:before {content:'';display: inline-block;margin:0 0.5em; width: 18px; height: 18px; background-image:url(../images/icon_01.png); background-repeat: no-repeat;background-size: contain;vertical-align: middle;}
#sub_head li span{ display: block; font-size: .8em; text-align: center; padding: 4px 0; font-style: normal; font-weight: normal;}
    

/* --------------------------------------------------
	Gナビ
-------------------------------------------------- */
#g_navi {display:none; position:static; height:auto; padding:0; margin-bottom:25px; background-color:rgba(255,255,255,0.7);}
#g_navi .layer {display:none;}
#g_navi nav{ width: auto;}
#g_navi h1{display: block;width:260px;margin: 0; position: relative;top: 7px; left: 20px;}	
#g_navi ul  {max-width:1000px; margin:0 auto; padding:0 20px; box-shadow:none;display:-webkit-flex; display:flex; -webkit-justify-content: space-between; justify-content:space-between;position:relative; z-index:99;}
#g_navi li { display: inline-block; width: auto; border:none !important; font-size:0.9em;border-bottom:1px solid #ddd; font-size:1.1em; text-align:center; font-style: italic;}
#g_navi li a {padding:0; display: inline-block;}
#g_navi li em {display:block; font-size:1.455em; margin-bottom:0.5em;}

.is-fixed #g_navi {display: block; position:fixed; top:0; left:0; margin-bottom:0; box-shadow: 0 5px 5px 0 rgba(0,0,0,0.05);}
.is-fixed #g_navi li.pc_only {display:block !important; width:80px;}
.is-fixed #g_navi li {padding:5px;}
.is-fixed #g_navi li:before {content:'';display: inline-block;margin:0 0.5em; width: 18px; height: 18px; background-image:url(../images/icon_01.png); background-repeat: no-repeat;background-size: contain;vertical-align: middle;}

/* --------------------------------------------------
	ページトップ
-------------------------------------------------- */
#backToTop {right:30px; bottom:30px; width:78px; height:auto;}
#backToTop:hover {opacity:0.75;}

/* --------------------------------------------------
	フッター
-------------------------------------------------- */
#footer {background:url(../images/bg_pattern04.png); background-size:cover;background-repeat: no-repeat; padding:70px 0;}	

/* フッタナビ共通  */
#footer_navi {display:block; max-width:1000px; margin:0 auto; padding:0 20px 40px;}
#footer_navi:after {content: ""; clear: both; display: block;}
#footer_navi > div {width:33%; float:left;}
#footer_navi .about {margin:0 5%; text-align-last: right;}
#footer_navi h2:before,#footer_navi h3:before {display:none;}
#footer_navi .about, #footer_navi .etc{ width: 28%;}	

#footer_navi .location li {font-size:0.875em;}
#footer_navi .location li:before {content:"・";}
#footer_navi .location h3{font-size:0.875em;}

#footer_navi .etc {text-align-last: right;}
#footer_navi .etc li {display:block;}
#footer_navi .etc li:nth-child(odd) {margin-right:0;}
#footer_navi .etc li:before {display:none;}

#footer .copyright{ font-size: 0.9em;}	

/* --------------------------------------------------
	トップページ
-------------------------------------------------- */
#top_contents {margin:0;}
#top_contents > section {margin:10vw auto;}

/* メインビジュアル */
#top_mv {max-width:1100px; margin:20vw auto !important;}
#top_mv .lead {width:100%; max-width:1000px; padding:1.25em 0 0.75em;}
#top_mv .lead h1 {font-size:1.6em; line-height: 180%;}
#top_mv .lead h1 span{}
#top_mv .lead p {font-size:1.2em; font-style: italic; margin: 1.2vw 0;}

/* リスト共通 */
.item_list {margin-bottom:40px;}
.item_list .item {width:46%; margin-bottom:0;}
.item_list .item .photo,.item_list .item .ttl {width:100%;}
.item_list .item .photo {margin-bottom:10px;}
.item_list .item h3 {position: relative;font-size:1.2em;z-index: 10;}
.item_list .item .sub {position: relative; z-index: 10;}
.item_list .item .comment{ font-size: 1em;}	
.item_list .item .ttl {position: relative; padding: 1.4vw 0 0 5vw; height: 80px; text-align: left;}
	
.item_list .item .ttl01:before{ content: ''; background-image: url(../images/ttl_reco_icon01.png); background-repeat: no-repeat; width: 90px; height:80px; background-size: contain; display: inline-block;position: absolute;top:1em;left:0;}
.item_list .item .ttl02:before{ content: ''; background-image: url(../images/ttl_reco_icon02.png); background-repeat: no-repeat; width: 90px; height:80px; background-size: contain; display: inline-block;position: absolute;top:1em;left:0;}	
.item_list .item .ttl03:before{ content: ''; background-image: url(../images/ttl_reco_icon03.png); background-repeat: no-repeat; width: 90px; height:80px; background-size: contain; display: inline-block;position: absolute;top:1em;left:0;}
.item_list .item .ttl04:before{ content: ''; background-image: url(../images/ttl_reco_icon04.png); background-repeat: no-repeat; width: 90px; height:80px; background-size: contain; display: inline-block;position: absolute;top:1em;left:0;}	
.item_list .item .btn{ width: 100%;}
.item_list .item .btn a{ display: block; width: 180px; padding: 6px 0; background-image: url(../images/btn_more.png);background-repeat: no-repeat; background-size: contain; margin: 1.2vw auto 5.2vw; color: #fff; text-align: center;}
.item_list .item .btn a:hover{background-image: url(../images/btn_more_off.png);background-repeat: no-repeat; background-size: contain;color:#3F3F3F;}	
	

/* SERVICE 私たちのサービス */
#top_recommend {max-width:1000px; margin:0 auto; padding:0 20px;}

/* 説明 Discription */
#top_pickup {width:100%; margin:0 auto; padding:10px 0;}
#top_pickup .sec_ttl,#top_pickup .pickup_list {max-width:960px; margin:0 auto;}
#top_pickup .pickup_list { font-size: 1em;}	
#top_pickup .pickup {width:30%; margin-bottom:40px;}
#top_pickup .pickup h3 {font-size:1.2em;}
#top_pickup .pickup .comment {font-size:1em;}	

/* 最新情報 */
#top_news{width: 100%; padding: 8vw 0 0; background-image: url(../images/bg_top_news.png); background-repeat: no-repeat; background-size:cover;}
#top_news .inner {max-width:1000px; margin:0 auto; padding:0 20px;}	
#top_news dt,#top_news dd {width:100%; border-bottom: 1px dotted #ccdbdc; padding: 1vw 0;}	
#top_news dl {margin:0 5%;}
#top_news dt {width:14em; font-size:1.066em;}
#top_news dd {width:calc(100% - 14em); font-size:1.066em;}
#top_news dt span { display:inline-block;width: 5vw; padding: 3px 0; text-align: center;margin: 0 10px 0 0; color: #fff; font-size:90%;}

/* 制作プラン */
#top_plan {max-width:1000px; margin:0 auto; padding:0 20px;}
#top_plan .item_list .item {width:20%; align-items: center;}
#top_plan .item_list:before{content:''; background-image: url(../images/icon_01.png); background-repeat: no-repeat; width: 31px; height: 25px; position:relative; top:45px; left:0; display:block;}
#top_plan .item_list:after{content:''; background-image: url(../images/icon_01.png); background-repeat: no-repeat; width: 31px; height: 25px; position:relative; top:45px; right:0; display:block;}


/* --------------------------------------------------
	下層ページ共通
-------------------------------------------------- */
#contents,#contents02 {margin:0;}
#contents > section {margin:8vw auto;}
#contents02 > section {margin:8vw auto;}	

/* パンクズリスト  */
#breadcrumb {max-width:1000px; margin:0 auto 20px; padding:0 20px;}
    
/* ページ見出し */
.lower_ttl {max-width:1000px; margin:0 auto; padding:0;} 
/* ページ見出し h2 */
#contents h2.title01,#contents02 h2.title01{position: relative;margin:4vw 0 4.6vw;text-align: center;font-size: 1.6em;color: #2b2d42;}
#contents h2.title01:before,#contents02 h2.title01:before {content: '';position: absolute;bottom: -2vw;display: inline-block;width: 60px;height: 2px;left: 50%;-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);background-color: #80ced7;border-radius: 6px;}
/* ページ見出し h3 */
#contents h3.title02,#contents02 h3.title02{position: relative;display: inline-block;padding: 0 2.5em;margin:4vw 0 4.6vw;text-align: center;font-size: 1.6em;color: #2b2d42; width: 100%;}
#contents h3.title02:before, #contents h3.title02:after,
#contents02 h3.title02:before, #contents02 h3.title02:after{content: '';position: absolute;top: 50%;display: inline-block;width: 15%;height: 1px;background-color: #7ED1E6;}
#contents h3.title02:before,#contents02 h3.title02:before {left:0;}
#contents h3.title02:after,#contents02 h3.title02:after {right: 0;}
/* ページ見出し h4 */
#contents h4.title04,#contents02 h4.title04 { width: 100%; margin:0; font-size: 1.6em; position:relative; font-weight:normal; margin-bottom:15px; border-radius:2px; padding:.5em; line-height:2.1em;}
#contents h4.title04:after,#contents02 h4.title04:after {content: "";display: block;height: 2px;background-image: linear-gradient(to right, #73C2B5, #7ED1E6);}
#contents h4.title04 .head_point,#contents02 h4.title04 .head_point {background-color:#73C2B5;border-radius:100%;padding:5px 10px;font-size:1em;color: #fff;margin-right: 5px;}

/* キャプション */
#contents .page_caption,#contents02 .page_caption{font-size:1.4em; font-weight: bold; text-align: center; line-height: 2em; padding: 3.6vw 0; font-family:“ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “游明朝”, YuMincho, "Sawarabi Mincho", “ＭＳ Ｐ明朝”, “MS PMincho”, serif;}
#contents .page_caption2,#contents02 .page_caption2{font-size:1.38em; line-height: 2em; padding: 1vw 0 3.2vw;}    

/* サイドコンテンツ（カテゴリ）  */
#side_cont {display:block;}
#side_cont h1 {font-size:1.07em; margin-bottom:2em;}
#side_cont h2 {font-size:1.87em; letter-spacing:0.2em; margin-bottom:0.35em; font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
#ctgry_navi .icon img {width:27px; margin-right:10px;}
#ctgry_navi li {font-size:1.07em; font-weight:bold; margin-bottom:2em;}
#ctgry_navi .num {font-size:0.875em;}
#ctgry_navi .num:before {content:"（";}
#ctgry_navi .num:after {content:"）";}
#ctgry_navi li ul {margin:1em 0 0 37px;}
#ctgry_navi li li {font-size:0.9375em; font-weight:normal; margin-bottom:1em;}
#ctgry_navi li li a {color:#444;}
#ctgry_navi li li a:hover {color:#bbb;}

#side_cont .input_box {font-size:0.8em; text-align:center;}
#side_cont .input_box input {max-width:180px; margin:0 5px 10px 0;}
#side_cont .input_box button {padding:0.5em 1em;}
	
/* 横幅100%　背景グレー */
#pickup {width:100%; margin:0 auto; padding:8vw 0 2.6vw;}
#pickup .pickup_inner {max-width:960px; margin:0 auto;}

/* --------------------------------------------------
	Service サービス内容
-------------------------------------------------- */	
/* Works 導入事例*/
.works {max-width:1000px; margin:0 auto; padding:0 20px;}
.works .item_list .item {width:22%; box-shadow: 2px 2px 4px #ccc;}
.works .item_list .item .photo { height:220px; overflow:hidden; margin-bottom:0;}
.works .item_list .item:last-child{ display: block;visibility: visible;}

/* --------------------------------------------------
	WEBサイト制作・モバイル制作
-------------------------------------------------- */
/* リード */
.sec_box {max-width:1000px; margin:0 auto; padding:0 20px;}    
.sec_box p {font-size:1.07em; margin:1vw 0 2vw; line-height:1.75;}

/* サイト制作の流れ */
.sec_box .flow{ display: table; width: 100%; margin: 0 0 2vw;}
.sec_box .flow dt{ display: table-cell; padding: 10px 20px; border: 1px solid #2b2d42; color:#fff; background:#2b2d42; margin: 0 20px 0 0; vertical-align: middle;}
.sec_box .flow dd{ display: table-cell; border: 1px solid #2b2d42; padding: 20px; vertical-align: middle;}
.sec_box .flow dd:after{ text-align: center; font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f107"; font-size: 1em; position: relative; bottom: -45px; display: block;}
.sec_box .flow.last dd:after{ display: none;}
    
/* 制作プラン */
.sec_box .item_list .item {width:20%; align-items: center;}
.sec_box .item_list:before{content:''; background-image: url(../images/icon_01.png); background-repeat: no-repeat; width: 31px; height: 25px; position:relative; top:45px; left:0; display:block;}
.sec_box .item_list:after{content:''; background-image: url(../images/icon_01.png); background-repeat: no-repeat; width: 31px; height: 25px; position:relative; top:45px; right:0; display:block;} 


/* --------------------------------------------------
	Works 実績紹介
-------------------------------------------------- */
.tabbtn{ justify-content: center; margin: 0 0 4vw;}
.tabbtn li{ margin: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center ;align-items: center; background:#2b2d42; width:calc(100% / 7) !important; background: #f5f5f5; color: #2b2d42; font-size: 0.9em;}
.tabbtn li.current{ background:#2b2d42; color: #fff;}
.tabbtn li:last-child{width: inherit;}
.tabbtn li a{ display: block; width: 100%; padding: 5% 0 2%; text-align: center;}
.tabbtn li.current a{ color: #fff;}
.tabbtn li a:after { display: block;font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f107";}

/* アプリ実績 */
#contents #works .sec1 .box .right .item_list .item {width:20%; align-items: center;}
#contents #works .sec1 .box .right .item_list:before{ display: none;}
#contents #works .sec1 .box .right .item_list:after{ display: none;} 

.sapp .item_list .item{ margin-right: 2vw;}
.sapp .item_list .item:nth-child(2n){ margin-right:2vw;}
.sapp .item_list .item:last-child{ margin-right:0;}	
	
/* --------------------------------------------------
	会社概要　compnay/
-------------------------------------------------- */
.com_photo_list{ width:100%;align-items: center;}
.com_photo_list li{ width:calc(100%/7); margin: 1%;}

/*ニュース*/
.entry dl dt{ border-bottom: 1px solid #80ced7; font-size: 1.2em; text-align: center; padding: 10px 0; font-weight: bold;}
.entry p.day{ text-align: right; font-size: 0.9em;}
.entry dl dd p img{ width: 20%; height: auto; margin: 0 auto 20px; display: block;}

}


/* --------------------------------------------------
	 984px〜　PC
-------------------------------------------------- */
@media print, screen and (min-width : 984px) {

/* ヘッダ */
#main_head {height:120px;}
#main_head .coupon {position:static; width:calc(100% - 634px); float:left; background:url(../images/bg_pattern05.png) repeat-x,url(../images/bg_pattern06.png) repeat-x left bottom,url(../images/bg_pattern07.png) repeat-y,url(../images/bg_pattern08.png) repeat-y right top,url(../images/bg_pattern01.png); background-size:auto,auto,auto,auto,12px 12px; line-height:1.35; padding:15px 20px; text-align:left;}
#main_head .coupon h2,#main_head .coupon p {display:block; margin:0;}
#main_head .coupon p strong {font-size:1.1em;}
#main_head .coupon p strong:after {content:url(../images/icon_free_postage.png); margin-left:5px;}
#main_head .coupon p.caution {display:block; margin:3px 0 0;}



}