@charset "UTF-8";
/* CSS Document */

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/09/23
* Last update : 2017/09/23
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* 画面幅：680px 以下
*************************************************************************************************************************/

/* main
**********************************************************************/
main ul li p,
main ul li a{ display: block; width: calc(100vw); height: calc(100vw * 1.47) !important; background-repeat: no-repeat; background-size: 100% auto; overflow: hidden; text-indent: 100%; white-space: nowrap;}
main ul li.img01 p{ background-image: url(../img/main_img01_sp.jpg);}
main ul li.img02 a{ background-image: url(../img/main_img02_sp.jpg);}
main ul li.img03 a{ background-image: url(../img/main_img03_sp.jpg);}
main ul li.img04 a{ background-image: url(../img/main_img04_sp.jpg);}
main ul li.img05 a{ background-image: url(../img/main_img05_sp.jpg);}
main ul li.img06 a{ background-image: url(../img/main_img06_sp.jpg);}

/* slick */


/* contents
**********************************************************************/
#information{ padding: 15px 16px 30px 16px; background: #f5f5f5;}
#information section{ margin: 0 0 15px 0; padding: 15px 16px; background: #fff;}
#information section h3{ margin: 0 0 15px 0; font-family: "brandon-grotesque",sans-serif; font-size: 20px; font-weight: 400; color: #333333; line-height: 100%; letter-spacing: 4px; position: relative;}
#information section h3 span{ display: block; margin: 7px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 12px; font-weight: 500; letter-spacing: 1px; }
#information section h3::before{ content: ""; width: 100%; height: 1px; position: absolute; top: 24px; left: 0;}

#information section.news h3::before{ background: #9dbb3c; }
#information section.news dl dt{ margin: 0 0 2px 0; font-size: 12px; font-weight: bold; color: #9dbb3c; }
#information section.news dl dd{ margin: 0 0 15px 0; font-size: 12px; }
#information section.news dl dd:last-child{ margin: 0;}

#information section.event h3::before{ background: #bba728; }
#information section.event ul li{ margin: 0 0 10px 0; padding: 10px; background: #f7f2de;}
#information section.event ul li dl{ overflow: hidden;}
#information section.event ul li dl dt{ margin: 0 0 10px 0; padding: 0 0 10px 0; font-family: "source-han-serif-japanese",serif; font-size: 14px; font-weight: 700; line-height: 130%; color: #333; border-bottom: 1px solid #999; }
#information section.event ul li dl dd{ min-height: 17px; margin: 0 0 5px 0; padding: 0 0 0 18px; font-size: 12px; line-height: 130%; color: #333333; font-weight: bold;}
#information section.event ul li dl dd:nth-of-type(1){ background: url(../common/img/icon_clock_yellow.svg) no-repeat; background-size: 13px 13px; float: left;}
#information section.event ul li dl dd:nth-of-type(2){ padding-top:1px; background: url(../common/img/icon_pin_yellow.svg) no-repeat 1px 0; background-size: 10px 17px; margin: 0 0 0 15px; float: left;}
#information section.event ul li dl dd:nth-of-type(3){ padding-left: 0; clear: both;}
#information section.event ul li dl dd:nth-of-type(3) a{ font-weight: bold; color: #333333;}
#information section.event ul li dl dd:nth-of-type(3) a:hover{ text-decoration: underline;}
#information section.event ul li:last-child{ margin: 0; padding: 0; background: none; position: relative;}
#information section.event ul li:last-child a{ display: block; width: 100%; height: 34px; background: #bba728; font-family: "source-han-serif-japanese",serif; font-size: 14px; font-weight: 600; line-height: 30px; color: #ffffff; text-align: center; border: 1px solid #bba728; border-radius:17px; }
#information section.event ul li dl.kobe dt{ color: #629998 !important; border-bottom: 1px solid #629998; }
#information section.event ul li dl.kobe dd:nth-of-type(1){ background-image: url(../common/img/icon_clock_blue.svg) !important;}
#information section.event ul li dl.kobe dd:nth-of-type(2){ background-image: url(../common/img/icon_pin_blue.svg) !important;}
#information section.event ul li dl.kobe dd:nth-of-type(3) a{ color: #629998 !important;}
#information section.event ul li dl.osaka dt{ color: #b450b4 !important; border-bottom: 1px solid #b450b4; }
#information section.event ul li dl.osaka dd:nth-of-type(1){ background-image: url(../common/img/icon_clock_pink.svg) !important;}
#information section.event ul li dl.osaka dd:nth-of-type(2){ background-image: url(../common/img/icon_pin_pink.svg) !important;}
#information section.event ul li dl.osaka dd:nth-of-type(3) a{ color: #b450b4 !important;}
#information section.event #facebook{ padding: 20px 0;}
#information section.event #facebook #pageplugin{ background:#FFF !important; width: 100% !important; }
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{ width: 100% !important;}
#information section.message h3::before{ background: #64509d; }
#information section.message dl dt{ margin: 0 0 2px 0; font-size: 12px; font-weight: bold; color: #64509d; position: relative;}
#information section.message dl dt span{ display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; text-indent: 100%; white-space: nowrap; position: absolute; top: -2px; left: 80px;}
#information section.message dl dt.full span{ background: #edcf00;}
#information section.message dl dt.new span{ background: #7c7c7c;}
#information section.message dl dd{ margin: 0 0 15px 0; font-size: 12px; }
#information section.message dl dd:last-child{ margin: 0;}

#aboutus{ padding: 15px 0 30px 0; position: relative; z-index: 3;}
#aboutus h3{ background: url( ../common/img/title_bg.svg) no-repeat center 25px; background-size: auto 1px; font-family: "brandon-grotesque",sans-serif; font-size: 20px; font-weight: 400; color: #333333; line-height: 100%; letter-spacing: 4px; text-align: center; position: relative;}
#aboutus h3 span{ display: block; margin: 10px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 12px; font-weight: 500; letter-spacing: 1px; }
#aboutus h3::before{ content: ""; width: 200px; height: 200px; background: #fff; border-radius: 50%; position: absolute; top: -45px; left: 50%; transform: translate(-50%,0px); z-index: -1;}
#aboutus h4{ margin: 20px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 16px; font-weight: 500; text-align: center;}
#aboutus h4 span{ display: block; margin: 20px 0 0 0; font-size: 12px; }
#aboutus h4 strong{ color: #80b1b1; font-weight: 500;}
#aboutus p{ margin: 0px 16px 0 16px; padding: 10px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 12px; font-weight: 500; line-height: 150%; color: #333333;}
#aboutus p:first-of-type{ margin-top: 20px; border-top: 1px solid #333333;}
#aboutus p:last-of-type{ margin-top: 15px; padding: 13px; border: solid 1px #4F8E8C; color: #333333; text-align: left;}
#aboutus .policy{ margin: 15px 16px; padding: 17px 13px 13px 13px; background: url(../img/policy_bg.png) repeat; background-size: 100% auto;}
#aboutus .policy h5{ margin: 0 0 10px 0; font-family: "brandon-grotesque",sans-serif; font-size: 16px; font-weight: 400; color: #5a3c14; line-height: 100%; letter-spacing: 4px; text-align: center;}
#aboutus .policy h5 span{ display: block; margin: 2px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 11px; font-weight: 500; letter-spacing: 1px; }
#aboutus .policy dl{ margin: 0 0 15px 0;}
#aboutus .policy dl:last-of-type{ margin-bottom: 0;}
#aboutus .policy dl dt{ margin: 0 0 5px 0; padding: 0 0 0 10px; background: url(../common/img/icon_arrow02.svg) no-repeat left/contain; background-size: auto 10px; font-family: "source-han-serif-japanese",serif; font-size: 14px; font-weight: 500; line-height: 130%; color: #333333;}
#aboutus .policy dl dd{ font-size: 12px; line-height: 150%; color: #333333;}


#profile{ padding: 15px 16px 60px 16px; background: #f5f5f5;}
#profile h3{ background: url( ../common/img/title_bg.svg) no-repeat center 25px; background-size: auto 1px; font-family: "brandon-grotesque",sans-serif; font-size: 20px; font-weight: 400; color: #333333; line-height: 100%; letter-spacing: 4px; text-align: center; position: relative;}
#profile h3 span{ display: block; margin: 10px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 12px; font-weight: 500; letter-spacing: 1px; }
#profile h3::before{ content: ""; width: 200px; height: 200px; background: #f5f5f5; border-radius: 50%; position: absolute; top: -45px; left: 50%; transform: translate(-50%,0px); z-index: -1;}
#profile .img{ width: 100%; height: calc(100vw * 0.5); margin: 10px 0 0 0; background: url(../img/profile_img.jpg) no-repeat center top; background-size: 100% auto; overflow: hidden; text-indent: 100%; white-space: nowrap;}
#profile p{ margin: 15px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 12px; line-height: 150%; color: #333333;}
#profile p span{ display: block; margin: 8px 0 0 0; text-align: right;}
#profile dl{ margin: 15px 0 0 0; padding: 10px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 12px; line-height: 130%; color: #333333; border-top: 1px solid #80b1b1; overflow: hidden;}
#profile dl dt{ width: 50px; margin: 0 0 6px 0; float: left; clear: both;}
#profile dl dd{ width: calc(100vw - 92px); margin: 0 0 6px 0; float: left;}
#profile .cap{ margin: 10px 0 0 0; font-size: 11px;}

#access{ padding: 15px 16px; background: #f5f5f5; position: relative;}
#access h3{ width: 120px; height: 120px; padding: 42px 0 0 0; background: #80b1b1; font-family: "brandon-grotesque",sans-serif; font-size: 18px; font-weight: 400; color: #fff; line-height: 100%; letter-spacing: 3px; text-align: center; position: absolute; top: -40px; left: 50%; transform: translate(-50%,0px); border-radius: 50%; z-index: 10;}
#access h3 span{ display: block; margin: 2px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 12px; font-weight: 500; letter-spacing: 1px; }
#access .map{ padding: 90px 10px 10px 10px; background: #fff;}
#access #googlemap{ margin: 0 0 10px 0; height: calc(100vw * 0.6);}
#access ul{ overflow: hidden; padding: 0 10px;}
#access ul li{ margin: 0 0 5px 0; font-size: 11px; line-height: 130%; overflow: hidden; float: left;}
#access ul li:first-child{ margin-right: 30px;}
#access ul li:last-child{ clear: both; float: none;}
@media print, screen and (max-width: 450px){
  #access ul li:first-child{ margin-right: 0px;}
} 
#access ul li strong{ margin: 0 10px 3px 0; font-size: 12px; font-weight: bold; float: left;}
#access ul li p{ float: left;}

#contact{ padding: 15px 16px 50px;}
#contact h3{ background: url( ../common/img/title_bg.svg) no-repeat center 25px; background-size: auto 1px; font-family: "brandon-grotesque",sans-serif; font-size: 20px; font-weight: 400; color: #333333; line-height: 100%; letter-spacing: 4px; text-align: center; position: relative;}
#contact h3 span{ display: block; margin: 10px 0 0 0; font-family: "source-han-serif-japanese",serif; font-size: 12px; font-weight: 500; letter-spacing: 1px; }
#contact h3::before{ content: ""; width: calc(100vw); height: calc(100vw * 0.3); background: #f5f5f5; border-bottom-right-radius: 50% 90%; border-bottom-left-radius: 50% 90%; position: absolute; top: -15px; left: 50%; transform: translate(-50%,0px); z-index: -1;}
#contact > p{ margin: 15px 0; font-size: 11px; line-height: 150%;}
#contact > p strong{ display: block; margin: 0 0 10px 0; font-size: 15px; font-weight: normal; text-align: center;}
#contact > p strong a{ display: block; font-size: 20px; color: #508280; font-weight: bold;}
#contact > p strong span{ font-size: 12px;}
#contact a.termsOn{ display: table; margin: 5px auto 0; font: 400 14px/1.3 "source-han-serif-japanese"; color: #64696e; text-align: center; text-decoration: underline;}
#contact a.termsOn:hover{ text-decoration: none;}
#contact form ul li{ margin: 0 0 10px 0; overflow: hidden; position: relative;}
#contact form ul li:last-child{ margin-bottom: 15px; }
#contact form ul li p{ width: 120px; margin: 0 0 5px 0; padding: 4px 0 0 45px; font-size: 12px; text-align: left; position: relative;}
#contact form ul li p span{ display: block; width: 35px; height: 25px; margin: 0 10px 0 0; background: #7c7c7c; font-size: 11px; color: #fff; line-height: 24px; text-align: center; border-radius: 3px; position: absolute; top: 0; left: 0; }
#contact form ul li p span::after{ content: ""; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent transparent transparent #7c7c7c; position: absolute; top: 8px; right: -4px;}
#contact form ul li input{ width: calc(100% - 45px); height: 35px; padding: 0 0 3px 10px; font-size: 12px; color: #333333; line-height: 100%; border: 1px solid #c4c4c4; border-radius: 3px; float: right;}
#contact form ul li textarea{ width: calc(100% - 45px); height: 100px; padding: 10px 0 0 10px; font-size: 12px; color: #333333; line-height: 1.5; border: 1px solid #c4c4c4; border-radius: 3px; float: right;}
#contact form ul li .err{ display: none; background: #80b1b1; width: 40px; height: 21px; position: absolute; top: 34px; right: 10px; border-radius: 3px; font-size: 11px; line-height: 21px; color: #fff; text-align: center;}
#contact .privacy{ height: 100px; padding: 10px 5px; border-top: 1px solid #c4c4c4; border-bottom: 1px solid #c4c4c4; overflow: hidden;}
#contact .privacy dl{ height: 80px; padding: 0 20px 0 0; font-size: 11px; line-height: 130%; overflow: hidden; position: relative; }
#contact .privacy dl dt{ padding: 0 0 5px 0; font-weight: bold;}
#contact .privacy dl dd{ padding: 0 0 10px 0;}
#contact .privacy dl dd:last-of-type{ padding-bottom: 0; text-align: right;}
/* perfect scrollbar */
#contact .privacy .ps-container .ps-scrollbar-y-rail{ width: 6px;	background: #eee; position: absolute; right: 0;}
#contact .privacy .ps-container .ps-scrollbar-y{ width: 6px; background: #80b1b1; position: absolute; right: 0;}
#contact .privacy .ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
#contact .privacy .ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y { background: #80b1b1;}
#contact .privacy .ps-container .ie .ps-scrollbar-y{ visibility: hidden;}
#contact .privacy .ps-container .ie:hover .ps-scrollbar-y,
#contact .privacy .ps-container .ie.hover .ps-scrollbar-y { visibility: visible;}
#contact a.to-preview{ display: block; margin: 30px 0 0 0; width: 100%; height: 35px; background: #7c7c7c; font-size: 12px; color: #fff; line-height: 33px; text-align: center; border-radius: 3px;}

/*formBox*/
#contactWindow{ background:rgba(91,91,91,0.6); position: fixed; top: 0; left: 0;z-index: 10000;}
#contactWindow .inner{ background: #FFF; height: 500px; width: 90%; padding:30px 20px 0; overflow: scroll; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border: 5px solid #EEE; /*border: 10px solid #EEE;*/ border-radius: 3px;}
#contactWindow .inner p{ text-align: center; font-size: 12px; color: #000;}
#contactWindow .inner dl { margin: 26px auto 0; border-bottom: 1px dotted #CCC;}
#contactWindow .inner dl dt,
#contactWindow .inner dl dd{ min-height:40px; padding:10px 0 0; font-size: 12px; line-height: 1.6; border-top: 1px dotted #CCC;}
#contactWindow .inner dl dt { font-weight: bold; }
#contactWindow .inner dl dd:last-of-type{ padding:10px 0;}
#contactWindow .inner .btnBox { margin: 30px auto;}
#contactWindow .inner .btnBox ul li{ text-align: center;}
#contactWindow .inner .btnBox ul li:nth-child(even){ margin:10px 0 0;}
#contactWindow .inner .btnBox ul li a { display:block; height: 40px; font-size: 12px; color:#FFF; line-height: 40px; border-radius:4px;}
#contactWindow .inner .btnBox ul li a.back{ background:#999;}
#contactWindow .inner .btnBox ul li a.submit{ background:#80b1b1;}
.thanks div{ width: 100%;padding:0 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform:translate(-50%,-50%); }
.thanks p{ text-align:center;}
.thanks a.close{ display:block; background:#999; max-width: 300px; height: 40px; margin:20px auto 0; color:#FFF; line-height: 40px; text-align:center; border-radius:4px;}


/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width: 681px){
  
  /* main
  **********************************************************************/
  main ul{ width: 100%; height: 400px; overflow: hidden;}
  main ul li{ margin: 0 16px 0 0; }
  main ul li p,
  main ul li a{ width: 850px; height: 400px; }
  main ul li.img01 p{ background-image: url(../img/main_img01_pc.jpg);}
  main ul li.img02 a{ background-image: url(../img/main_img02_pc.jpg);}
  main ul li.img03 a{ background-image: url(../img/main_img03_pc.jpg);}
  main ul li.img04 a{ background-image: url(../img/main_img04_pc.jpg);}
  main ul li.img05 a{ background-image: url(../img/main_img05_pc.jpg);}
  main ul li.img06 a{ background-image: url(../img/main_img06_pc.jpg);}
  
  /* contents
  **********************************************************************/
  #information{ padding: 150px 75px 50px;}
  #information > div{ width: 850px; margin: 0 auto;}
  #information section{ margin-bottom: 30px; padding: 30px;}
  #information section.news dl{ overflow: hidden;}
  #information section.news dl dt{ width: 80px; margin: 0 10px 0 0; float: left; clear: both;}
  #information section.news dl dd{ width: 700px; float: left;}
  #information section.event{ overflow: hidden;}
  #information section.event ul{ width: 380px; margin: 0 30px 0 0; float: left;}
  #information section.event #facebook{ width: 380px; height: 478px; padding: 0; float: left;}
  #information section.message dl{ padding: 5px 0; overflow: hidden;}
  #information section.message dl dt{ width: 130px; margin: 0 10px 0 0; float: left; clear: both;}
  #information section.message dl dd{ width: 650px; float: left;}
  
  #aboutus{ padding-top: 30px; padding-bottom: 80px;}
  #aboutus > div{ width: 700px; margin: 0 auto;}
  #aboutus h3{ background-position:center 30px; font-size: 24px; }
  #aboutus h3::before{ top: -60px;}
  #aboutus h4{ margin-top: 50px; font-size: 20px; letter-spacing: 1px;}
  #aboutus h4 span{ margin: 25px 0 0 0; font-size: 13px; }
  #aboutus p{ width: 700px; margin: 30px auto 0 auto; text-align: center; }
  #aboutus p:first-of-type{ margin: 20px auto 0 auto;}
  #aboutus p:last-of-type{ margin: 40px auto 0 auto; padding: 30px; line-height: 170%;}
  #aboutus .policy{ width: 700px; margin: 50px auto 0 auto; padding: 40px; overflow: hidden;}
  #aboutus .policy h5{ margin-bottom: 20px;}
  #aboutus .policy dl{ width: 295px; margin-right: 30px; float: left;}
  #aboutus .policy dl:nth-child(odd){ margin-right: 0;}

  #profile{ padding: 30px 150px 80px; overflow: hidden;}
  #profile > div{ width: 700px; margin: 0 auto;}
  #profile h3{ margin-bottom: 50px; background-position:center 30px; font-size: 24px; }
  #profile h3::before{ top: -60px;}
  #profile .img{ width: 210px; height: 300px; margin: 0; background-size: auto 300px; float: left;}
  #profile p{ display: block; width: 460px; margin-top: 0; line-height: 180%; float: right;}
  #profile dl{ width: 460px; margin-top: 30px; padding-top: 30px; line-height: 150%; float: right;}
  #profile dl dd{ width: 410px;}
  
  #access{ padding: 30px 150px 50px;}
  #access > div{ width: 700px; margin: 0 auto;}
  #access .map{ padding: 100px 0 0 0;}
  #access h3{ width: 140px; height: 140px; padding-top: 50px; background-position:center 30px; font-size: 20px; top: -30px; }
  #access #googlemap{ height: 470px;}
  #access ul{ padding: 10px 20px;}
  
  #contact{ padding-bottom: 100px;}
  #contact h3{ background-position:center 30px; font-size: 24px;}
  #contact h3::before{ width: 1000px; height: 150px;}
  #contact > p{ text-align: center; line-height: 180%;}
  #contact > p strong a{ font-size: 23px;}
  #contact > p strong span{ font-size: 14px;}
  #contact form ul{ width: 850px; margin: 0 auto; padding: 30px 0 50px;}
  #contact form ul{ overflow: hidden;}
  #contact form ul li{ width: 395px; margin-bottom: 25px; float: left;}
  #contact form ul li:nth-child(odd){ margin-right: 50px;}
  #contact form ul li:last-child{ width: 100%; clear: both;}
  #contact form ul li p{ width: 130px; padding-top: 8px; padding-right: 10px; text-align: right; float: left;}
  #contact form ul li p span{ top: 5px;}
  #contact form ul li input{ width: 260px; height: 40px; float: left;}
  #contact form ul li textarea{ width: 715px; height: 250px; float: left;}
  #contact form ul li .err{ top: 9px; right: 14px;}
  #contact .privacy{ width: 850px; height: 150px; margin: 0 auto;}
  #contact .privacy dl{ height: 130px;}
  #contact a.to-preview{ width: 350px; height: 40px; margin: 0 auto; font-size: 13px; line-height: 40px;}
  
  
  /*formBox*/
  #contactWindow .inner{ width: 750px; height: 540px; padding:50px 0 0; border: 10px solid #EEE;}
  #contactWindow .inner p{ font-size: 14px; }
  #contactWindow .inner dl { width: 550px; margin: 40px auto 0; overflow: hidden; }
  #contactWindow .inner dl dt,
  #contactWindow .inner dl dd{ min-height:50px; padding:14px 0 0; float: left; font-size: 14px; }
  #contactWindow .inner dl dt { width: 155px; padding: 11px 0 0 10px; }
  #contactWindow .inner dl dd { width: 395px; padding: 11px 10px 0 0;}
  #contactWindow .inner dl dd:last-of-type{ padding: 11px 10px 11px 0;}
  #contactWindow .inner .btnBox { display:table; width: 330px; margin: 50px auto;}
  #contactWindow .inner .btnBox ul li:nth-child(odd){ float: left;}
  #contactWindow .inner .btnBox ul li:nth-child(even){ margin:0 0 0 30px; float: right;}
  #contactWindow .inner .btnBox ul li a{ width: 150px; font-size: 14px; transition: background-color 0.3s linear;}
  #contactWindow .inner .btnBox ul li a.back:hover{ background: #787777;}
  #contactWindow .inner .btnBox ul li a.submit:hover{ background:#80b1b1;}
  .thanks a.close{ margin:50px auto 0; transition: background-color 0.3s linear;}
  .thanks a.close:hover{ background: #787777;}


}


  @media print, screen and (min-width: 1001px){
    #contact h3::before{ width: calc(100vw); height: 150px;}
  }
 


form .g-recaptcha{ margin: 0 0 30px 0;}
form .g-recaptcha > div{ margin: 0 auto;}