@charset "utf-8";
@import url(style2019.css);
@import url(swiper.css);
@import url(drawerMenu.css);
@import url('https://fonts.googleapis.com/css?family= Convergence');
@import url('https://fonts.googleapis.com/css?family=Tangerine');

/**********************************************************************　基本　*******************************************************************************/

html { font-size: 100% }html { height:100% }
body { height:100% ; text-align: center } 
body { font-weight: 400;
-moz-font-feature-settings: 'palt' 1; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1; letter-spacing: .02em; 
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

article { position:relative ; overflow: hidden }
img, div, p, figure{ margin: 0;padding: 0 }img { border-style: none;vertical-align: bottom }

.rela { position: relative }
.fxt { position: fixed }
.abso { position: absolute }
.clear-box { clear: both;float: none;margin: 0;padding: 0; }
.clearfix:after { content: '';display: block;clear: both; }
.clearfix { zoom: 1; /* for IE6/7 */ }

/***********************************************************************　リンク　色　******************************************************************************/

.rubi { font-size: 0.7em}

h1,h2,h3,h4 {font-weight: 400;margin: 0;padding: 0}

.txl { text-align: left }
.txj { text-align: justify }
.txc { text-align: center }
.txr { text-align: right }

.ph-copy { width: 95% ;margin-left: 2.5%;margin-top: 2% }
.ph-copy p {  }

/**********************************　ウェブフォント　*************************************/

@font-face
{
font-family: 'avantgardeBook';
src: url('../enfonts/avantgardeBook.eot');
src: url('../enfonts/avantgardeBook.eot?#iefix') format('embedded-opentype'),
url('../enfonts/avantgardeBook.ttf') format('truetype');
}

@font-face
{
font-family: 'universlight';
src: url('../enfonts/UniversLight.eot');
src: url('../enfonts/UniversLight.eot?#iefix') format('embedded-opentype'),
url('../enfonts/UniversLight.otf') format('opentype');
}

@font-face
{
font-family: 'HelveticaNeueThin';
src: url('../enfonts/HelveticaNeueThin.eot');
src: url('../enfonts/HelveticaNeueThin.eot?#iefix') format('embedded-opentype'),
url('../enfonts/HelveticaNeueThin.otf') format('opentype');
}


/**********************************************************************　フォントサイズ　*************************************************************************/

.read { font-size: 1.1em;line-height: 1.7em; }
.txt { font-size: 0.9em;line-height: 1.8em; }
.spec { font-size: 0.75em;line-height: 1.6em; }

.ph-copy h2 { font-size: 1.8em;line-height: 1.2em; }
.ph-copy h3 { font-size: 1.2em;line-height: 1.4em; }

.cpcr { font-size: 0.8em;line-height:1.8em }
.cpcr .eng { font-size: 2.0em;line-height: 1.6em }

.card span.cardh { font-size: 1.0em;line-height: 1.6em; }
.card span.cardt { font-size: 0.8em;line-height: 1.6em; }
.card span.cardc { font-size: 0.7em;line-height: 1.6em; }

.tray { font-size: 0.8em;line-height: 1.6em; }
.thmbph { font-size: 0.8em;line-height: 1.4em; }

th,td 	{ font-size: 0.8em; }

/**********************************************************************　デザイン　*******************************************************************************/

.id-box.nobo,.id-box.bono { border-top-width: 0px; }

.z1 {z-index:1}.z2 {z-index:2}.z3 {z-index:3}.z10 {z-index:10}.z100 {z-index:100}

.more, .boto { padding-top:10px; }
.kakomi { padding:10px }

.mbake { margin-bottom: 30px }

/**********************************************************************　背景写真ボックス　************************************************************************/

.bgph { background-image: url(../image01/bg01.jpg);background-repeat: no-repeat; }

#photobg { background-repeat: no-repeat;position: relative}

#photobg p img, .nobg img, .p-top-spacer img { width: 100%; height: auto }
#photos.fxt { z-index: 0 }

/***********************************************************************　固定ヘッダー　******************************************************************************/

header { position: fixed;z-index: 3; width: 100%; }
header { left: 0;top: 0; }

/***********************************************************************　ロゴ類　******************************************************************************/

.logol { position: fixed;z-index: 4 }
.logol img { width: auto ; height: 100%; }
.logol a { opacity: 1.0 }
.logol a:hover { opacity: 0.6 }

.logom { position: absolute;z-index: 2 }
.logom img { height: auto ; width: 100%; }

.logos { display: block;position: absolute;z-index: 10;}
.logof { margin: 30px 0 10px 0; }

/***********************************************************　ナビゲーションは「wide.css」に記述　****************************************************************/

/***********************************************************************　フッター　******************************************************************************/

.sitemap a {
	display: block;
	float: left;
	border: 1px solid #CCCCCC;
	border-radius:6px;
}

footer{
display: block;
clear: both;
float: none;
text-align: center;
position: relative;
padding: 20px 0 100px 0;
margin: 50px 0 0 0;
}

/***********************************************************************　写真　スライドショー　スワイパー　******************************************************************************/

.swiper-slide img { width: 100%;height: auto;}
.swiper-slide { width: 100%;}
.swiper-slide { font-size: 18px;background: #fff; }  /*変更可能*/
.swiper-container { width: 100%;margin: 0;overflow: hidden;position: relative; }
.swiper-pagination{ height: 30px; position: absolute;left: 0;bottom: 0 }
.swiper-pagination-bullet { width: 10px;height: 10px; }

.swiper-slide {
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
.swiper-slide {
		-webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

#nobg { width: 100%;position: relative;background-repeat: no-repeat;}

.xxxx { width: 100%;padding-bottom: 0px}

/**********************************************************************　ブリンク　*******************************************************************************/

.blink {
    -webkit-animation: blink 1s ease infinite;
    animation: blink 2s ease infinite;
}
@-webkit-keyframes blink {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes blink {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/*******************************************************************************　マルチ　*********************************************************************************/

.lft, .rgt { position: relative; }

/******************************************************************************* 価格 *********************************************************************************/

 div.set{margin: 0 auto;width: 180px;height: 25px;}
 div.set p{display: block;float: left;width: 60px;}
 div.set p.hin{font-size: 1.0em;line-height: 1.7em;text-align: left;}
 div.set p.price{font-size: 1.5em;line-height: 1.0em;text-align: right;}
span.price{font-size: 1.5em;line-height: 1.0em;}
 div.set p.zei{font-size: 0.9em;line-height: 1.8em;text-align: left;}

/**********************************************************************  商品一覧  *******************************************************************************/

.card { display: block;height: auto;float: left; }
.card a { display: block }
.card a img { width: 100%;height: auto;padding-bottom: 10px}
.card span { display: block; }
.card a:hover {opacity: .8 }
.card span.cardh { padding-bottom: 3px;margin-bottom: 5px }

/**********************************************************************  説明一覧  *******************************************************************************/

.tray { display: block;height: auto;float: left;padding: 15px; }

/**********************************************************************  エフェクト  *******************************************************************************/

/**　　　　　左右２列　　　　　　　**/

.zoom-box figure { width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden;}
.zoom-box figure img { width: 100%;height: auto; }

/**********************************************************************  サムネール  *******************************************************************************/

.thmbph { float: left; }
.thmbph img { width: 100%;}

/************************************** ４列セット  *****************************************/

.card a {padding: 10px 0}
.card a img {width: 90%;height: auto;}

/************************************** ６列セット  *****************************************/

.card.card06 a {padding: 6% 0}
.card.card06 a img {width: 86%;height: auto;}

/**********************************************************************　テーブル　*******************************************************************************/

table	{ width: 100%; }
th	{ text-align: left;font-weight: normal; }

table.attention	th,td {padding: 5px 5px;}

/**********************************************************************　フォーム類　*******************************************************************************/

dl.toiawase{font-size: 0.75rem;text-align: left}
dl.toiawase dd.submi { text-align: center}
input {margin-right: 5px;margin-bottom: 5px;}
textarea {border: 1px solid #ddd;}

/**********************************************************************　動画　*******************************************************************************/

.video-box { position: relative }
.video-bt { position: absolute; top: 0;left: 0;z-index: 1; }
.video-bt a img { width: 100%; height: auto; opacity: 0; }
.video-bt a:hover img { opacity: 1; }

#myVideo { width: 100% ; height: auto ; object-fit: cover ; z-index:1; }

/**********************************************************************　アローリスト　*******************************************************************************/

ul,li{ margin: 0px;padding: 0px;text-align: left;list-style:none; }

ul.arrowlist li { padding-left:18px;position:relative; }
ul.arrowlist li:before,ul.arrowlist li:after { content:"";display:block;position:absolute; }
ul.arrowlist li:before{ width:12px;height:12px;border-radius:2px;left:0;top:4px; }
ul.arrowlist li:after{ border:3px solid transparent;left:5px;top:7px; }
ul.arrowlist li:before { background:#ccc; }
ul.arrowlist li:after { border-left-color:#fff; }

.tray ul.arrowlist li:before { left:0;top:4px; }
.tray ul.arrowlist li:after  { left:5px;top:7px; }

/**********************************************************************　画像サイズの調整　*******************************************************************************/

.phj img { width: 100%; height: auto }

/**********************************************************************　サイズの調整　*******************************************************************************/

.minh-40 { min-height: 40px }
.minh-60 { min-height: 60px }
.minh-80 { min-height: 80px }
.minh-100 { min-height: 100px }
.minh-120 { min-height: 120px }
.minh-150 { min-height: 150px }
.minh-200 { min-height: 200px }