@charset "utf-8";
@import url("font.css");
/*
 reset
-------------------------------------------------------------------*/
body, h1, h2, h3, h4, h5, p, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
}
@media (max-width: 768px) {
   body, h1, h2, h3, h4, h5, p, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	font-size:3.2vw;
   }
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
ul {
	list-style: none;
}
img {
	vertical-align: bottom;
}
body {
	font: 75%/1 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	color:#333;
}
/* start: clearfix ------------------------------ */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix {
	display: inline-block;
}
.clearfix {
	display: block;
}
/* end: clearfix ------------------------------ */

/* link color */
a:link, a:visited {
	color: #333;
}
a:hover, a:active {
	color: #333;
	text-decoration: none;
}
a, area {
	-webkit-tap-highlight-color: rgba(2, 109, 236, 0.5);
}
/*
 $.ASconf.selfLink()
-------------------------------------------------------------------*/
.current, .current:hover {
	color: #360;
	font-weight:bold;
}

/* PCでは表示し、スマートフォンでは非表示にする要素 */
.pc-only {
    display: block;
}

@media (max-width: 768px) {
    .pc-only {
        display: none;
    }
}

/* スマートフォンでは表示し、PCでは非表示にする要素 */
.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .sp-only {
        display: block;
    }
}
@media (max-width: 768px) {
   #wrap{
      width: 100vw;
      min-width: inherit;
      overflow: hidden;
   }
}
/* 画像が親要素からはみ出さないように */
img {
    max-width: 100%; /* 親要素の幅を超えないように */
    height: auto; /* アスペクト比を維持 */
}
/*
 header
-------------------------------------------------------------------*/
#header {

	width: 960px;
	height: 150px;
	margin: 0 auto;
	text-align: left;
   position: relative
}
#headerWrap{
	background: url(../img/head-line.jpg) repeat-x bottom;
}
@media (max-width: 768px) {
    #header {
        width: 100vw; /* 画面幅いっぱいに */
       position: relative;
    }
}
/* logo */
#logo {
	padding:0;
	float:left;
}
#head-copy{
	margin:20px 0 10px 0;
}

@media (max-width: 768px) {
   #logo {
      float: none;
      position: relative;
      top:6vw;
      left:4vw
   }
   #logo img{
      width: 50vw
   }
   #head-copy{
      margin: 0;
      font-size: 2.7vw;
      position: relative;
      top:4vw;
      left: 4vw
   }
}

#hNav {
	margin-top:5px;
/*	float:right;*/
	border-right:#333 1px solid;
   position: absolute;
    left: 400px;
    top: 51px;
}
#hNav li {
	margin-bottom:2px;
	float:left;
	border-left:#333 1px solid;
	padding:0 5px;


}
@media screen and (max-width: 767px) {
   #hNav{
      display: none;
   }

}


#Hamburger{
   display: none
}

@media screen and (max-width: 767px) {
   #Hamburger{
      display: block;
   }
/* 初期状態：メニュー本体と閉じるアイコンを非表示 */
#sp_gnavi {
  display: none; /* または visibility: hidden; と opacity: 0; */
  /* スライドインなどのアニメーションを付けたい場合は position, top/left/right などで画面外に配置 */
  /* 例: position: absolute; top: 100%; left: 0; width: 100%; */
  /* transition: all 0.3s ease; */
}

#Hamburger .menu_close {
  display: none;
      width: 12vw;
    height: 8vw;
    position: absolute;
    top: 10vw;
    right: 4vw;
  z-index: 1001;

}

#Hamburger .menu_open {
  display: block; /* 初期状態で表示 */
   width: 12vw;
    height: 8vw;
    position: absolute;
    top: 10vw;
    right: 4vw;
    z-index: 1000;

}

/* #Hamburger に .is-open クラスが付いた時の状態（メニューが開いた状態） */
#Hamburger.is-open #sp_gnavi {
  display: block; /* または visibility: visible; と opacity: 1; */
  /* スライドインアニメーションの場合の表示位置 */
  /* 例: top: XXpx; /* ヘッダーの下など */
}

#Hamburger.is-open .menu_close {
  display: block; /* 開くアイコンを非表示にし、閉じるアイコンを表示 */
}

#Hamburger.is-open .menu_open {
  display: none; /* 開くアイコンを非表示 */
}

#Hamburger ul.menu {
    box-sizing: border-box;
    overflow-y: scroll;
    position: absolute;
    background-color: #fff;
    padding: 50px 30px 25px;
    top: 0;
    width: 100%;
    min-height: 100vh;
    height: auto;
    z-index: 10;
}
#Hamburger ul.menu li {
    border-bottom: 1px solid #000;
    display: block;
    margin: 20px 0;
   padding-bottom: 20px;
   font-size: 5vw
}
   #Hamburger ul.menu li a{
      text-decoration: none;
   }
}

/*
 container
-------------------------------------------------------------------*/
#container {
	width: 960px;
	margin: 0 auto;
	background: #fff;
	text-align: left;
}

@media (max-width: 768px) {
    #container {
        width: 100vw;
        padding: 0;
       overflow: hidden;
       box-sizing: border-box;
    }
}
/*
 top
-------------------------------------------------------------------*/
.topVisual {
	position: relative;
	margin:5px;
	text-align: left;
	height:700px;
	width:850px;
}
@media (max-width: 768px) {
   .topVisual {
      width:95vw;
      height: 75vw
   }
}
/*
foot
-------------------------------------------------------------------*/
#footWrapTop{
	top:1px;
	border:1px solid rgba(255,255,255,0.5);
	outline:1px solid rgba(0,0,0,0.2);
}
#footWrap{
	background-color: #cdcccc;
	top:1px;
	border:1px solid rgba(255,255,255,0.5);
	outline:1px solid rgba(0,0,0,0.2);
	margin-top:20px;
}

.footCont{
	width:960px;
	margin:0 auto;
	padding:20px;
}
@media (max-width: 768px) {
   #footWrap{
      width: 100vw;
   }
   .footCont{
      width: 100vw;
      padding: 5vw;
   }
   
}
.footer_box{
   display: inline-block;
   vertical-align: top;
   margin-left: 10px;
   font-size: 12px;

}
.footer_box:nth-child(7){
   margin-top: 10px;
   float: right
}
@media (max-width: 768px) {
   .footer_box{
      display: inline-block;
      box-sizing: border-box;
      margin-left: 0;
      margin-bottom: 7vw;
      width: 90vw;
   }
   .footer_box:nth-child(2),.footer_box:nth-child(3),.footer_box:nth-child(4),.footer_box:nth-child(5){
      width: 45vw;
      text-align:center;
   }
   .footer_box:nth-child(6){
      width: 90vw;
      text-align:center;
      margin-top: 10px
   }
   .footer_box:nth-child(7){
      margin-top: 5vw;
      float: none;
   }
}
/*
 scroller
-------------------------------------------------------------------*/

#visualWrap {
	position: relative;
	width: 960px;
}
/* scroll */
#scroller {
	position: relative;
	width: 960px;
	height: 730px;
	overflow: hidden;
}
#scroller h2{
   margin-top: 30px;
}

@media (max-width: 768px) {
   #visualWrap {
      width: 100vw;
      height: 106vw;

   }
   .confirm #visualWrap {
      height: auto;
      min-height: 120vw
   }
    #scroller {
        width: 100vw; /* 画面幅いっぱいに */
        height: 120vw;
    }
   .confirm #scroller {
      min-height: 120vw;
      overflow: scroll
    }
   #container h2{
      margin: 0;
      width: 96vw;
      overflow: hidden;
      padding: 0;
   }
   #scroller h2{
      margin: 1vw 0 0 1vw;
      width: 98vw;
      overflow: hidden;
      padding: 0;
   }
}


#scroller .ui-flickable-container {
	cursor: pointer;
}
#scroller .ui-flickable-wrapper {
	padding: 0 1px !important;
	background: transparent !important;
}
#flipCont { width: 960px; }/* JSでコンテンツに応じて自動調整 */
#flipCont.out {/* JSアニメーション用 */
	opacity: 0;
	margin-left: 100px;
}
#flipCont li {
	position: relative;
	float: left;
	padding: 0 40px;
	width: 880px;
	height: 730px;
}
@media (max-width: 768px) {
    #flipCont {
        width: 100vw; /* 画面幅いっぱいに */
        height: 75vw;
    }
   #flipCont li {

      padding: 0;
      width: 100vw;
      height: 75vw;
   }
}


/* nav */
#vNav p {
	position: absolute;
	top: 54px;
	z-index: 2;
}
#vNavP {
	left: 0;
}
#vNavN {
	right: 0;
}
#vNav a {
	display: block;
	width: 30px;
	padding: 300px 0;
}

#vNavP a {
	padding-right: 10px;
}
#vNavN a {
	padding-left: 10px;
}
@media (max-width: 768px) {
   #vNav p {
      top: 60vw;
   }
   #vNavP {
      position: absolute;
      left: 2vw;
      width: 7vw;
   }
   #vNavN {
      position: absolute;
      right: 2vw;
      width: 7vw;
   }
   #vNav a {
      width: 12vw;
      padding: 22vw 0;
   } 
   #vNav a img{
      width: 7vw;
   }
}
a.hide {
	opacity: 0.4;
	cursor: default;
}


/*
 page
-------------------------------------------------------------------*/

.contWrap {
	margin: 30px 0 0 30px;
}
.section {
	margin-bottom: 25px;
}
.sentence {
	
	margin-bottom: 10px;
}
.fontW {
	font-size: 14px;
}
.fontB {
	font-weight:bold;
}

.fontB_bigR {
	font-weight:bold;
	font-size: 120%;
	
}

.tab-foot{
	float:left;
	margin-bottom:5px;
	width:500px;
	font-size:12px;
}
.tab-foot tr td{
	padding:0 10px 0 0;
   vertical-align: top;
}

.tab-01{
	float:left;
	margin-bottom:5px;
	width:400px;
	font-size:12px;
}
.tab-01 tr td{
	padding:0 10px 0 0;
}

.tab-02{
	margin:0 15px 15px 15px;
	width:780px;
}
.tab-02 tr td{
	padding:0 10px;
}

.tab-03{
	margin:0 15px 15px 15px;
	border:#999 2px solid;
}
.tab-03 tr td{
	padding:10px;
	border-bottom:#999 1px dotted;
   width: 150px
}
.tab-03 tr td:last-child{
   width: 630px
}

.tab-03 th{
	padding:10px;
	border-bottom:#999 1px dotted;
	background-color:#D2E5EB;
}

@media (max-width: 768px) {
   .tab-03{
      margin:0 0 2vw 0;
   }
   .tab-03 tr td,.tab-03 th{
      padding: 2vw
   }
}
.news{
	height:100px;
	overflow-y:auto;
}

.tab-reqest{
	border-bottom:#F60 1px solid;
	margin:0 5px 15px 5px;
	width:100%;
}

.tab-reqest tr td{
	padding:0 5px;
}
@media screen and (max-width: 767px) {
   .tab-foot{
      float:left;
      width:100%;
      font-size:2.7vw;
   }
}
/* フォントサイズ
------------------------------------------- */
/*.fontTwoUp { font-size: 125%; line-height: 1.6 !important; }
.fontOneUp { font-size: 110%; line-height: 1.6 !important; }
.fontOneDown { font-size: 90%; line-height: 1.4 !important; }
.fontTwoDown { font-size: 85%; line-height: 1.2 !important; }*/


/*
 scroll cont
-------------------------------------------------------------------*/
#flipCont p {

	line-height: 1.5;
	font-size: 13px;
}
@media (max-width: 768px) {
   #flipCont p {
      font-size: 3.2vw;
   }
}
.right {
	width:310px;
	float: right;
	margin-right:150px;
}
.left {
	width:310px;
	float: left;
	margin-left:10px;	
}

.right-center {
	width:480px;
	float: right;
	margin:140px 80px 0 0;
}
.left-center {
	width:260px;
	float: left;
	margin:95px 10px 0 50px;	
}




/*
 スクロールページ
-------------------------------------------------------------------*/
.pageBox {
	width: 850px;
	margin:5px;
}
.pageBox2 {
	width: 880px;
	margin:30px 10px 10px 10px;
	padding:0 5px;
}

@media (max-width: 768px) {
   .pageBox {
      width:95vw;
      height: 75vw
   }
   .pageBox2 {
      width:95vw;
      height: 75vw;
      margin: 0;
      padding: 0;
   }
   .contWrap{
      margin: 0 0 0 11vw;
   }
   .confirm .contWrap{
      margin: 0 0 0 5vw;
   }
   .confirm .contWrap blockquote{
      padding: 0;
      margin: 2vw 0 0 0
   }
   .txt_mega_bold {
      margin-top: 2vw
   }
   .pageBox2 .right{
      float: none;
      width: 70vw;
      margin-right: 0;
   }
   .pageBox2 .txt_mega_bold {
      margin-top: 0
   }
   #contactForm th, #contactForm td {
      padding: 0.5vw;
    line-height: 1.2;
   }
}
.pageBox3 {
	width:660px;
	float:left;
	
}

.pageBox-right {
	width:200px;
	float:right;
}

/* Conceptページ */
.page .item0 .pageBox p {
	padding: 0;
	font-size:12px;
}



/* Collectionページ */
.page .item1 .pageBox img {
	padding: 5px;
}

.page .item2 .pageBox img {
	padding: 5px;
}

/* Collection各アイテムページ */
.page .btList img {
	padding: 5px;
}


.collection_logo {
	width:150px;
	float: left;
	/*margin-right:180px;*/
}
.collection_item {
	width:700px;
	float: right;
}

/*plofileページ */

.profile {
	margin:20px 10px 10px 30px;
	float:left;
}
.profile th, .profile td {
	padding: 5px 10px;
	line-height: 1.5;
	border-bottom:#999 1px dotted;
	
}
.profile th {
	white-space: nowrap;
	text-align:left;
	padding-left: 0;
	color: #333;
}

.map{
	width:400px;
	float:right;
	margin:20px;
}






/* --------------------------------------------------
スクロールしないページ
---------------------------------------------------- */

/*
メインコンテンツボックス---------------------------- */
#mainCont {
	width:940px;
	margin:0 auto;
	padding: 10px;
	background: #fff;
}

.boxTop{
	border-bottom:#369 1px solid;
	margin:20px 0;
	padding-bottom:15px;
	width:940px;
}

.boxLef{
	float:left;
	width:700px;
	margin-right:20px;
}

.boxRight{
	float:right;
	width:220px;
	margin:0;
	text-align:justify;  
text-justify: inter-ideograph;
}

.img-right {
  float:right;
  margin-left: 2em;
  margin-bottom: 1em;
}
#mainCont  iframe{
   width: 700px;
   height: 400px
}
@media (max-width: 768px) {
   #mainCont{
           width: 100vw;
        padding: 0 2vw;
        overflow: hidden;
        box-sizing: border-box;
   }
   .boxTop{
      border-bottom:#369 1px solid;
      margin:5vw 0;
      padding-bottom:7vw;
      width:96vw;
   }
   #mainCont h3{
      font-size: 4vw;
      margin:  2vw 0 2vw 4vw
   }
   #mainCont .boxTop h3{
      font-size: 4vw;
      margin:  2vw 0 2vw 0vw
   }

   .boxLef{
      float:none;
      width:96vw;
      margin-right:0;
   }

   .boxRight{
      float:none;
      width:96vw;
   }
   .boxRight img{
      width: 50vw;
      margin: 5vw 23vw 5vw
   }
   .img-right {
     float:none;
     margin-left: 0;
     margin-bottom: 5vw;
   }
   #mainCont iframe{
      width: 96vw;
      height: 64vw
   }
}


/*
タイトルコンテンツボックス---------------------------- */
.BoxCorners   {
	margin:20px 0 15px 0;
	
}

.BoxCorners2   {
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
	border: #bdb76b 2px solid;
	padding:5px 20px;
	margin:0;
	background-image: -moz-linear-gradient(top, #fffbf5, #f7ffd1);
background-image: -ms-linear-gradient(top, #fffbf5, #f7ffd1);
background-image: -o-linear-gradient(top, #fffbf5, #f7ffd1);
background-image: -webkit-gradient(linear, center top, center bottom, from(#fffbf5), to(#f7ffd1));
background-image: -webkit-linear-gradient(top, #fffbf5, #f7ffd1);
background-image: linear-gradient(top, #fffbf5, #f7ffd1);

	
}

/*
サブコンテンツボックス------------------------------ */
#subCont {
	float:right;
	display:inline; /* for IE*/
	width:190px;
	margin-top:13px;
	margin-right:13px;
	text-align:left;
	line-height:1.3em;
}


/* 番号付きリスト privacy.html*/
.number {
	list-style:decimal;
	padding: 0;
}
.number p {
	margin:0.8em 0;
}
.number li {
	margin:0.8em 0;
}


/* 矢印付きリスト
------------------------------------------- */

.arrowStyle ul {
	padding:10px 0px;
	margin: 0;
}
.arrowStyle li {
	margin:0 0 10px 0;
	padding-left:0.8em;
	background:url(../../shr/img/icon-arrow-01.gif) 0 0.5em no-repeat;
}

.arrowStyleP a {
	margin:0 0 5px 0;
	padding-left:0.8em;
	background:url(../../shr/img/icon-arrow-01.gif) 0 0.3em no-repeat;
}


.listDott ul {
	padding:5px 10px;
	margin: 0;
}
.listDott li {
	margin:0 10px 20px 0;
	padding-left:1.5em;
	background:url(../../shr/img/icon-dott.png) 0 0.5em no-repeat;
}

.listDott a {
	margin:0 10px 20px 0;
	padding-left:1.5em;
	background:url(../../shr/img/icon-dott.png) 0 0.5em no-repeat;
}





/*
 form
-------------------------------------------------------------------*/

/* form */

/*#contactForm table {
	width: 100%;
}*/
#contactForm th, #contactForm td {
	padding: 10px;
	line-height: 1.4;
}
#contactForm th {
	white-space: nowrap;
	padding-left: 0;
	color: #333;
}
#contactForm {
	font-size: 85%;
}
#contactForm .address th, #contactForm .address td {
	border: 0;
}
#submitBt {
	text-align: center;
}
#submitBt input {
	border: 3px double #fff;
	padding: 4px 12px;
	margin:10px 0;
	background-color:#333;
	color: #fff;
	cursor: pointer;
}
@media (max-width: 768px) {
   #submitBt input {
      padding: 0.5vw 1vw;
      margin:2vw 0;
   }
}
#submitBt input:hover {
	background-color:#999;
}
label.error {
	display: block;
	padding: 2px 0 0 16px;
	font-size: 12px;
	color: red;
	background: url(../img/icon_i_11.gif) left center no-repeat;
}
textarea {
	width:270px;
}
input {
	width: 210px;
}
@media (max-width: 768px) {
   input {
      width: 40vw;
   }
   #contactForm th, #contactForm td {
      padding: 1vw;
    line-height: 1.2;
   }
   textarea {
      height: 20vw
   }
}
/*
 privacy
-------------------------------------------------------------------*/
.privacy h4 {
	margin-bottom: 1em;
	border-bottom: 1px dotted #30b6d2;
}
.privacy h5 {
	margin-bottom: 1em;
}


table.conf{
   width: 100%;
   
}
table.conf th,table.conf td{
   padding: 5px;
}


/*
 print
-------------------------------------------------------------------*/
/* @media print {
body,
#visualWrap { background: #fff; }
#hNav,
#sns,
#nav,
#tNav,
#vNav,
#footerWrap { display: none; }
#header {
	width: 956px;
	height: 64px;
	margin: 0;
	background: #F8F4DD;
}
#container {
	border: 0;
	margin: 0;
}

#scroller {
	height: inherit;
	overflow: visible;
}
.life #flipCont li {
	background-image: url("../img/life/bt_bg.gif"), url(../img/visual_bg.gif) ;
	background-position: 830px 486px, 0 0;
	background-repeat: no-repeat, repeat-x;
}
#flipCont li {
	float: none;
	border: 1px solid #30b6d2;
	margin: 50px 0;
}
#flipCont .nationBox .cont {
	width: 520px;
}
#flipCont .nationBox .txtBox .cont {
	width: inherit;
}
#flipCont .pageBox .cont { width: 564px; }
#item0,
#item1,
#item2,
#item3,
#item4,
#item5,
#item6,
#item7 { page-break-after: always; display:none; }

}*/