/*
Theme Name:一蓮
Theme URI:
Version: 1.0
Author: takami
Author URI: https://agree-works.com/
License: takami
*/


 /*----------
  @ 共通
 ----------*/
html{
    font-size: 62.5%;
}

body{
    font-size: 1.6rem;
    font-family: 'Noto Serif JP',"游明朝", YuMincho ,Hiragino Mincho ProN,"ヒラギノ明朝 ProN",serif;
    line-height: 1.8;
	letter-spacing: 2px;
    background:#000;
    background-size: 100%;
    color: #fefefe;
    margin: 0;
    padding: 0;
}

body.page-id-33{
    background: #d5dce0;
    color: #595757;
}

body.page{
    padding-top: 0;
}

.fixed{
  top: 0px;
  left: 0px;
  width: 100%;
}

.hide{
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
	display: block;
	height:0px;
	padding:0px;
	margin:0px;
}

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

h2{
    font-size: 6rem;
    font-weight: 400;
    padding-bottom: 30px;
}

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

li{
    list-style: none;
}

ul,li,dl,dt,dd,td,th,tr{
    margin: 0;
    padding: 0;
}

a{
    margin: 0;
    padding: 0;
	text-decoration:none;
    color: #fefefe;
}

p{
    margin: 0;
    padding: 0;
    text-align: justify;
}

img{
    max-width:100%;
    height: auto;
    box-sizing: border-box;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
}

table{
    clear: both;
    border-collapse: collapse;
}

.section{
    margin-bottom: 160px;
}

.page-section{
    margin-bottom: 120px;
}

#wrap{
    margin: 0px auto;
    max-width: 100%;
    z-index: 3;
}

.cont {
    margin: 0px auto;
    width: 90%;
    z-index: 1;
    max-width: 1140px;
}

#main{
    max-width: 100%;
    width:100%;
    z-index: 1;
    display: block;
}

/*共通ボックスCSS*/
.three_box,.four_box,.five_box,.six_box,.seven_box{
box-sizing:border-box;
}

.five_box{
width: 48%;
max-width: 100%;
display: inline-block;
vertical-align: top;
}

.page{
    margin: 0px auto 0px;
    width: 100%;
    padding-top: 80px;
}


/*リンクボタン*/
.link_box {
    padding: 5px 20px 5px 0;
    font-size: 1.8rem;
    color: #fefefe;
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    transition: all 0.3s;
}

.link_box:after{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid;
    border-color: #fefefe #fefefe transparent transparent;
    transform: rotate(45deg);
    right: 0;
    top: 18px;
}

.link_box:hover{
    opacity: 0.6;
}

.topics_links{
    text-align: right;
}


/*YouTube Googlemap*/
  .gmap{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

  .gmap iframe, .gmap object, .gmap embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*パンくずリスト*/
.breadcrumbs{
    font-size: 1.4rem;
    margin: 20px auto 0;
}

.breadcrumbs span{
padding: 0 2px;
}

.breadcrumbs a{
    color: #d2ac6b;
}


/*固定ページタイトル*/
.pageheader{
    width: 100%;
    padding: 150px 0px 120px;
    margin: 0 auto;
    position: relative;
    background: url(img/aboutus-head.jpg) no-repeat center;
    background-size: cover;
}

.pageheader_cont{
    width:1140px;
    max-width:90%;
    margin:0 auto;
    height:auto;
    position: relative;
}

.pageheader_cont h2{
    color: #fff;
    font-size: 6rem;
    border: none;
    letter-spacing: 3px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 0;
}

.aboutus_head{
    background: url(img/aboutus-head.jpg) no-repeat center;
    background-size: cover;
}

.contact_head{
    background: url(img/contact-head.jpg) no-repeat center;
    background-size: cover;
}

.staff_head{
    background: url(img/staff-head.jpg) no-repeat center;
    background-size: cover;
}


.bannerArea{
    max-width: 820px;
    width: 90%;
    margin: 40px auto 0;
}

 /*----------
  @ ヘッダー
 ----------*/
#header{
    z-index: 3;
    height: 80px;
    max-width: 1320px;
    width: 94%;
    margin: 24px auto 24px;
}

#header h1{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

#header h1 a{
    white-space: nowrap;
    overflow: hidden;
    background: url(img/header-logo.svg) no-repeat;
    background-size: 100%;
    display: block;
    height: 80px;
    width: 158px;
    margin: 0 auto;
    transition: all .4s;
}

#header h1 a:hover{
    opacity: 0.6;
}

#headercont{
    margin: 0 auto;
    position: relative;
    padding: 0px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.staff-header{
    width: 20%;
    display: flex;
    justify-content: space-around;
}

#top_mainmenu {
    max-width: 100%;
    width: 70%;
}

#top_mainmenu ul{
    display: flex;
    box-sizing: border-box;
    text-align: center;
    align-items: center;
    justify-content: end;
    gap: 16px;
}

#top_mainmenu li{
    line-height: 1.2;
}

#top_mainmenu li a{
    position: relative;
    transition: all 0.3s;
}

#top_mainmenu li a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    width: 80%;
    height: 1px;
    background:#fefefe;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}

#top_mainmenu li a:hover::after {
    transform: scale(1, 1);
}

#top_mainmenu li._mainmenu-online{
    width: 38px;
}

#top_mainmenu li._mainmenu-chainon{
    width: 50px;
}

body.page-id-33 #header a{
    color: #595757;
}

body.page-id-33 #header h1 .chainon-logo{
    white-space: nowrap;
    overflow: hidden;
    background: url(img/chainon-logo_bk.png) no-repeat;
    background-size: 100%;
    display: block;
    height: 88px;
    width: 88px;
    margin: 0 auto;
}

body.page-id-33 #header h1 a{
    white-space: nowrap;
    overflow: hidden;
    background: url(img/ichiren-symbol_logo.png) no-repeat;
    background-size: 100%;
    display: block;
    height: 88px;
    width: 88px;
    margin: 0 auto;
}

/*----------
@トップページのみ表示
----------*/

/*loading*/
#loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #fefefe;
    text-align: center;
  }

  #loading_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #loading .kvArea {
    width: 100%;
    text-align: center;
  }

  #loading .kvArea .img_box {
    text-align: center;
  }

  #loading .kvArea .img_box img {
    max-width: 120px;
    height: auto;
  }

  .race-by {
    --uib-size: 160px;
    --uib-speed: 1.6s;
    --uib-color: #000;
    --uib-line-weight: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--uib-line-weight);
    width: var(--uib-size);
    border-radius: calc(var(--uib-line-weight) / 2);
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    margin: 0 auto;
  }
  
  .race-by::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--uib-color);
    opacity: 0.1;
  }
  
  .race-by::after {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: calc(var(--uib-line-weight) / 2);
    animation: raceBy var(--uib-speed) ease-in-out infinite;
    transform: translateX(-100%);
    background-color: var(--uib-color);
  }
  
  @keyframes raceBy {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }



.top-slider{
    position: relative;
}

.slider {
    position:relative;
	z-index: 1;
	height: 80vh;
    width: 100%;
}

.slider1{
    background: url(img/slider1.jpg) no-repeat;
}

.slider2{
    background: url(img/slider2.jpg) no-repeat;
}

.slider3{
    background: url(img/slider3.jpg) no-repeat;
}

.slider4{
    background: url(img/slider4.jpg) no-repeat;
}

.slider5{
    background: url(img/slider5.jpg) no-repeat;
}

.slider6{
    background: url(img/slider6.jpg) no-repeat;
}

.slider7{
    background: url(img/slider7.jpg) no-repeat;
}

.slider8{
    background: url(img/slider8.jpg) no-repeat;
}

.slider-image {
    width: 100%;
    height:80vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.no1{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%,-50%);
    max-width: 220px
}

.slick-list .slick-slide{
    height: 80vh;
    min-height: 0%;
}

.slick-dots li button::before {
    color:#fefefe;
}


/*--------------*/
/*@Contact form 7
/*--------------*/

.wpcf7-form {
    padding: 60px 0 20px;
}

.wpcf7-form span.red  {
color: #d2ac6b;
}

.wpcf7-form .wpcf7-textbox{
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    height: 46px;
    font-size: 1.6rem;
    border-radius: 4px;
    border: none;
    appearance: none;
    -webkit-appearance: none;
}

.wpcf7-form textarea{
    width:100%;
    height:150px;
    border-radius: 4px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.wpcf7-form table{
    width: 100%;
    max-width: 600px;
    margin: 0 auto 30px;
    text-align: left;
}

.wpcf7-form table th,
.wpcf7-form table td{
    display: block;
    width: 100%;
}

.wpcf7-form table th{
    padding-bottom: 10px;
}

.wpcf7-form table td{
    padding-bottom: 22px;
}

.wpcf7-form .wpcf7-submit{
    width: 90%;
    max-width: 400px;
    color: #fefefe;
    background: #D2AC6B;
    border: none;
    border-radius: 6px;
    margin: 0 auto;
    display: block;
    font-size: 1.8rem;
    height: 56px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all .3s;
}

.wpcf7-form .wpcf7-submit:hover{
    opacity: 0.6;
}

div.wpcf7-validation-errors {
    border: 4px double #ac5556;
    text-align: center;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
}

span.wpcf7-not-valid-tip {
    color: #ac5556;
    font-size: 1.6rem;
    font-weight: 600;
    display: block;
    padding-top: 6px;
    border-radius: 8px;
}

div.wpcf7-mail-sent-ok {
    border: 2px solid #8f8414;
    max-width: 590px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    border-radius: 8px;
}

.contact ul{
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.contact ul li{
    text-indent: -1.6rem;
    padding-left: 16px;
    padding-bottom: 10px;
}

/*----------
@新着情報・お知らせ
----------*/

#list ul{
    width:100%;
    display: block;
    padding-bottom: 30px;
}

.topics li{
    padding: 20px 20px;
    box-sizing: border-box;
    border-bottom: solid 1px #fefefe;
}

.topics li .news{
    background: #000;
    color: #fefefe;
    margin: 0 18px;
}

#list li h3{
    font-size: 1.8rem;
    display: inline-block;
}

#list a{
    transition: all .3s;
}

#list a:hover{
    opacity: 0.6;
}

.cat{
    display: inline-block;
    text-align: center;
}

.cate_block{
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 26px 16px;
    border-bottom: solid 1px #fefefe;
    box-sizing: border-box;
}

.cate_left{
    display: inline-block;
    width: 30%;
    max-width: 100%;
    padding: 10px;
    height: 180px;
    overflow: hidden;
}

.cate_right{
    vertical-align: top;
    box-sizing: border-box;
    max-width: 100%;
    text-align: left;
}

.cate_right h3{
    font-size: 2.2rem;
    padding-bottom: 6px;
}

.topics-date{
    padding-bottom: 10px;
}

.topics_title{
    padding-bottom: 40px;
}

.topics_title h3{
    font-size: 3rem;
}

.single_page p{
    padding-bottom: 30px;
}

.single_page p a{
    text-decoration: underline;
    font-weight: 700;
}

.postnav{
    text-align: center;
    padding: 50px 0 20px;
}

/*サイドバー */
#sidebar{
    vertical-align: top;
    padding-top: 30px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

#sidebar .sidemenu ul{
    margin: 10px auto 20px;
}

#sidebar .news{
    color: #fefefe;
    background: #000;
}

#sidebar .campaign{
    color: #fefefe;
    background: #e0191b;
}

.sidebar_category{
    padding: 0px 0 8px;
}

#sidebar #list ul{
    max-width: 100%;
    padding-top: 20px;
    padding-bottom: 60px;
}

#sidebar #list ul li{
    padding: 16px 10px;
    border-bottom: solid 1px #fefefe;
}

#sidebar #list .thumb{
    width: 80%;
    height: 160px;
}


/*カテゴリー用記事リスト*/

#page #list ul li{
margin:5px;
padding: 5px;
}

#page #list .thumb{
max-width:100%;
height:auto;
 }

#page #list .thumb img{
    left: 0%!important;
    position: relative;
    width: 100%;
    -webkit-transform: translate(-0%,-0%);
    -ms-transform: translate(-0%,-0%);
    transform: translate(-0%,-0%); 
}

.year{
font-style: italic;
font-weight: inherit;
}


/*----------
@ Concept
----------*/
.concept{
    position: relative;
    margin-top: 180px;
    height: 74vh;
}

.concept-image1{
    width: 64vw;
}

.concept-image2{
    position: absolute;
    bottom: -108px;
    right: 0;
    width: 34vw;
}

.concept-text{
    background: #000;
    box-sizing: border-box;
    position: absolute;
    padding: 30px;
    right: 6vw;
    top: 14%;
    width: 34vw;
}

.concept-text h2{
    font-size: 2.6rem;
    padding-bottom: 30px;
}

.concept-text p{
    padding-bottom: 20px;
}

/*----------
@ Page link
----------*/
.page-links{
    text-align: center;
}

.page-links li{
    display: inline-block;
    width: 28%;
    margin: 14px;
    position: relative;
    transition: all .4s;
}

.page-links li h2{
    font-size: 3.4rem;
    z-index: 3;
    font-weight: 500;
    padding-bottom: 0;
    position: relative;
}

.page-links a{
    padding: 50% 0;
    position: relative;
    display: block;
}

.page-links a::before{
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all .3s;
}

.page-links a:hover::before{
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.aboutus-bg a{
    background:url(img/menu-aboutus_bg.jpg) no-repeat;
    background-size: cover;
}

.staff-bg a{
    background:url(img/menu-staff_bg.jpg) no-repeat;
    background-size: cover;
}

.contact-bg a{
    background:url(img/menu-contact_bg.jpg) no-repeat;
    background-size: cover;
}

/*----------
@ アクセス
----------*/
.access-info{
    padding-top: 30px;
}

.access-info h3{
    font-size: 2rem;
    padding-bottom: 20px;
}

.access-info h3 span{
    font-size: 3rem;
}

.access-info ul{
    display: inline-block;
    width: 48%;
    vertical-align: top;
}

.access-info ul li{
    padding-bottom: 10px;
}

.access-info ul li a,
.access-info_sub a{
    transition: all .3s;
}

.access-info ul li a:hover,
.access-info_sub a:hover{
    opacity: 0.6;
}

.access-info ul table th,
.access-info ul table td{
    padding-bottom: 10px;
}

.access-info ul table th{
    vertical-align: top;
    width: 20%;
}

.access-info_sub{
    margin: 40px auto 0;
}

.access-info_sub h4{
    font-size: 2rem;
    padding-top: 8px;
    line-height: 1.5;
    padding-bottom: 20px;
}

.access-info_sub h4 span{
    font-size: 1.6rem;
}

.access-info_sub ul li{
    padding-bottom: 8px;
}


/*----------
@ about us
----------*/
.page-about_concept{
    max-width: 660px;
    width: 90%;
    margin: 0 auto 50px;
}

.page-about_concept h3{
    font-size: 2.6rem;
    padding-bottom: 24px;
    font-weight: 600;
}

.page-about_concept p{
    padding-bottom: 20px;
}

.wedding-banner{
    text-align: center;
}

.wedding-banner img{
    max-width: 890px;
    width: 90%;
}

.wedding-banner h3,
.shop-list h3{
    text-align: center;
    font-size: 3rem;
    padding-bottom: 40px;
}

.shop-list_content{
    text-align: center;
    padding-bottom: 100px;
}

.shop-list_name{
    max-width: 1140px;
    width: 90%;
    margin: 0 auto 40px;
}

.shop-list_name img{
    max-width: 170px;
}

.shop-list img{
    vertical-align: middle;
}

.shop-list_name-text{
    text-align: left;
    max-width: 810px;
    width: 100%;
    margin: 14px auto 0;
    text-align: center;
}

.shop-list_name-text h4{
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    padding-bottom: 20px;
    text-align: center;
}

.shop-list_name-text h4 span{
    font-size: 1.8rem;
}

.shop-list_name-text a img{
    width: 24px;
    margin: 0 auto;
    display: block;
}

.shop-list_name-text p{
    padding-top: 30px;
    text-align: center;
}

.shop-list_name-text ul{
    padding-top: 20px;
    font-size: 1.4rem;
}

.shop-list_name-text ul li{
    padding-bottom: 8px;
}

.shop-list_name-text ul a{
    transition: all .3s;
}

.shop-list_name-text ul a:hover{
    opacity: 0.6;
}

.shop-list_photo ul li{
    display: inline-block;
    margin: 10px;
    width: 23%;
}

.shop-photo{
    text-align: center;
}

.shop-photo_inner{
    max-width: 88%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.shop-image_list{
    width: 48%;
}

.shop-image_list img{
    padding-bottom: 20px;
}

.shop-image_right{
    padding-top: 80px;
}

.shop-image_left{
    position: relative;
}

.shop-image1{
    width: 70%;
    position: absolute;
    top: 0;
    right: 10px;
}

.shop-image2{
    position: absolute;
    bottom: 4vw;
    right: 3vw;
}

/*----------
@ staff
----------*/
.staff-shop_name{
    padding-bottom: 50px;
}

.staff-shop_name img{
    max-width: 200px;
}

.staff-shop_name h3{
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.2;
}

.staff-shop_name h3 span{
    font-size: 1.6rem;
}

.staff .cont{
    text-align: center;
    color: #575757;
    margin-bottom: 160px;
}

.staff-chief{
    padding-bottom: 40px;
}

.staff-chief,
.staff-list{
    padding-top: 40px;
}

.staff-chief h4,
.staff-list h4{
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.4;
    padding: 0px 0 18px;
}

.staff-chief h4 span,
.staff-list h4 span{
    font-size: 1.6rem;
}

.staff-chief p,
.staff-list p{
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.staff-chief img,
.staff-list img{
    max-width: 390px;
    width: 90%;
}

.staff-list{
    display: inline-block;
    width: 40%;
    vertical-align: top;
    margin: 20px;
}

.staff-right{
    padding-top: 140px;
}

/*----------
@ フッター
----------*/
body.page-id-33 #footer,
body.page-id-33 #footer a{
    color: #595757;
}

#footer{
    padding: 3% 0;
    color: #fefefe;
}

#footer .cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#footer a{
    color: #fefefe;
    transition: all 0.3s;
}

#footer a:hover{
    opacity: 0.6;
}

.footmenu ul li{
    display: inline-block;
    padding: 10px;
    width: 30px;
}

.footmenu ul li img{
    width: 26px;
}

.ft_bottom{
    display: block;
    text-align: center;
}

body.page-id-33 footer,
body.page-id-33 footer a{
    color: #595757;
}

#pagetop {
    position: fixed;
    width: 64px;
    border-radius: 8px;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    color: #fefefe;
    z-index: 3;
}



/*--------------*/
/*レスポンシブ基本CSS
/*--------------*/

.pcheader{
    display:block;
}

.pc{
    display:block;
}

.mobile{
    display: none!important;
}

nav.globalMenuSp{
    display: none;
}


@media screen and (max-width: 1024px){
.no1{
    max-width: 30%;
}

.pcheader{
    display:none;
}

.staff-header{
    width: 34%;
    margin: 0 auto;
}

#headercont{
    display: block;
    padding:0px;
    margin:0px;
}

/*　ハンバーガーボタン　*/
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 13px;
    top   : 26px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
  }

  .hamburger span {
    display: block;
    position: absolute;
    width: 40px;
    height: 3px;
    left: 0;
    background: #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }

  .hamburger span:nth-child(1) {
    top: 10px;
  }
  .hamburger span:nth-child(2) {
    top: 20px;
  }
  .hamburger span:nth-child(3) {
    top: 30px;
  }

  .hamburger.active span:nth-child(1) {
    top : 24px;
    left: 0px;
    background :#fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 24px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }

  nav.globalMenuSp {
    display: block;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    color: #fff;
    background: #000;
    text-align: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
  }

  nav.globalMenuSp ul {
    padding: 0;
    width: 100%;
    margin: 90px auto 0;
  }

  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
  }

  nav.globalMenuSp ul li img{
    max-width: 100px;
  }

  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
  }

  nav.globalMenuSp ul li:hover{
    background :#ddd;
  }

  nav.globalMenuSp ul li a {
    font-size: 1.8rem;
    display: block;
    color: #fff;
    padding: 0.8em 0;
    text-decoration: none;
  }

  nav.globalMenuSp.active {
    opacity: 100;
    visibility: visible;
  }

.area {
    padding: 50px 10px;
}

/*----------
@ top
----------*/
.concept{
    margin-top: 100px;
}

.concept-image1{
    width: 90vw;
}

.concept-text{
    width: 94vw;
    top: 24vh;
    padding: 20px;
}

.concept-image2{
    width: 52vw;
}

}

@media screen and (max-width: 640px){

body{
    font-size: 1.4rem;
}

h2{
    font-size: 3rem;
    padding-bottom: 20px;
}

.mobileheader{
    display: block!important;
}

.pc{
    display:none!important;
}

.mobile{
    display: block!important;
}

#header{
    height:45px;
    margin: 24px auto 34px;
}

.slick-list .slick-slide,
.slider{
    height: 70vh;
}

.pageheader_cont h2{
    font-size: 3rem;
}

#top_mainmenu{
    display:none;
}

#pagetop {
    width: 54px;
    height: 54px;
    bottom: 10px;
    right: 10px;
}

#pageheader {
    padding: 50px 0px 50px;
}

#header h1{
    width: 90%;
    margin: 0 auto;
}

#header h1 a{
    display: block;
    height: 60px;
    width: 130px;
    top: 0;
}

body.page-id-33 #header h1 a,
body.page-id-33 #header h1 .chainon-logo{
    height: 60px;
    width: 60px;
}

.section{
    margin-bottom: 60px;
}

.page-section {
    margin-bottom: 80px;
}

.link_box{
    font-size: 1.6rem;
}

.cate_left {
    display: block;
    width: 82%;
    height: 200px;
    margin: 0 auto;
}

.cate_right {
    display: block;
    width: 100%;
}

.cate_right h3{
    font-size: 1.8rem;
}

.pageheader{
    padding: 80px 0;
}

.page {
    padding-top: 30px;
}

.topics li {
    width: 100%;
}

.topics_title {
    padding-bottom: 30px;
}

.topics_title h3 {
    font-size: 1.8rem;
}

#list li h3 {
    font-size: 1.6rem;
    display: block;
    padding: 0px;
}

/*----------
@ top
----------*/
.concept{
    height: 700px;
}

.concept-text h2{
    font-size: 2rem;
    padding-bottom: 20px;
}

.concept-image2{
    bottom: -8px;
    right: 0;
    width: 77vw;
}

.page-links li {
    width: 46%;
    margin: 14px 4px;
    vertical-align: top;
}

.page-links li h2{
    font-size: 2.4rem;
}

.access-info_sub{
    display: block;
    margin: 20px auto 0;
}

.access-info_sub h4{
    font-size: 1.8rem;
}

.access-info_sub h4 span{
    font-size: 1.4rem;
}

.access-info_sub ul{
    width: 100%;
}


/*----------
@ about us
----------*/
.wedding-banner h3,
.shop-list h3 {
    font-size: 2rem;
    padding-bottom: 20px;
}

.shop-list_name-text h4{
    font-size: 2.4rem
}

.shop-list_name-text h4 span{
    font-size: 1.6rem
}

.shop-list_photo ul li{
    width: 42%;
}

.shop-list_name img{
    width: 150px;
}

.shop-photo_inner{
    display: block;
}

.shop-image_list{
    width: 90%;
    margin: 0 auto;
}

.shop-image1,
.shop-image2{
    position: static;
}

.shop-image_right{
    padding-top: 0;
}

/*-------------*/
/* @ staff
/*-------------*/
.staff-shop_name img {
    width: 50%;
}

.staff-shop_name h3{
    font-size: 2.8rem;
}

.staff-shop_name h3 span{
    font-size: 1.6rem;
}

.staff-chief h4,
.staff-list h4{
    font-size: 2rem;
    padding: 0px 0 20px;
}

.staff-right{
    padding-top: 40px;
}

.staff-list{
    display: block;
    width: 100%;
    margin: 0;
}

.staff .cont{
    margin-bottom: 80px;
}

#sidebar {
    margin: 10px auto;
    width: 98%;
    display: block;
}

.access-info h3{
    font-size: 1.8rem;
}

.access-info h3 span{
    font-size: 2rem;
}

.access-info ul{
    display: block;
    width: 100%;
}

#footer .cont{
    width: 50%;
}

.footer_info img {
    max-width: 140px;
}

.ft_bottom {
    display: block;
    text-align: center;
    font-size: 0.8rem;
}

}