@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url(swiper.css);@import url(en.css);@import url(enfonts.css);

html, body { margin: 0;padding: 0; height: 100%; }
html { font-size: 62.5%; }
body { background-color: hsla(0,0%,0%,1); color: hsla(0,0%,100%,1); font-family: "Midashi Go MB31"; font-size: 1.4rem; line-height: 2.4rem; -webkit-font-smoothing: antialiased; font-feature-settings: "palt";  }
.clearfix:after { content: '';display: block;clear: both; }
.clearfix { zoom: 1; /* for IE6/7 */ }

#flash01,#flash02,#flash03,#flash04,#flash05,.rental { opacity: 0 }

a { color: hsla(0,0%,100%,1.00); text-decoration: none }

img { border: none; vertical-align: bottom }
.phj img { width: calc(100% - 2px); padding: 1px 1px 0; height: auto }
.eng { font-family: "HelveticaNeueBd", sans-serif; word-spacing: 0em !important; }
.txl { text-align: left; }
.txc { text-align: center; }
.typo { font-size: 0; line-height: 0; text-indent: -5000px}
.abso { position: absolute; z-index: 4 }
.boto { border-top: #ccc 1px dotted; }
.kakomi { border: #ccc 1px dotted; margin-bottom: 40px; padding-bottom: 20px }
h1, h2, h3, h4 { font-weight: normal}
body#home h1 {  }
main, .wrap { -moz-font-feature-settings: 'palt' 1; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1; letter-spacing: .05em; }
.wrap{ position: relative; height: 100%; width: 100%; }
footer { text-align: center; }

#section1, #section2, #section3, #section4, #section5, #section6 { background-size: cover; background-color: #000; background-repeat: no-repeat; }
#photobg01, #photobg02, #photobg03 { background-repeat: no-repeat; background-color: #000; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
#photobg01 { z-index: 1; } #photobg02 { z-index: 2; } #photobg03 { z-index: 3; }


#stage{
text-align: center;
position: absolute;
left:-1px;
right: 0;
display: none;
z-index: 2;
}
#stage img{ opacity: .8 }

#logo{
height: 100%; width: 100%;
position: absolute;
left:0;
top: 0;
z-index: 1;
text-align: center;
}

ul.maru { margin-top: 0px; padding-top: 0px; }
ul.maru { padding-left: 1.1em ;}
ul.maru li { list-style: none; position: relative; text-align: left; }

ul.maru li::after {
  display: block;
  content: '';
  position: absolute;
  top: .42em;
  left: -1em;
  width: 5px;
  height: 5px;
  background-color: hsla(0,0%,0%,1.00);
  border: 2px solid hsla(0,0%,100%,.7);
  border-radius: 100%;
}

.svg1{ display: block; text-align: center; opacity: 1 }
body.page .h1like, body#home h1 { position: absolute; z-index: 10 }
header ul li, footer ul li { margin: 0; padding: 0; list-style: none }

body.page header ul li a { opacity: .5 }
body.page header ul li a:hover { opacity: 1; transition: all  0.5s ease; }

.pp-box { margin: 0 0 40px 20px }

a.keibi { display: inline-block; border: 1px solid hsla(353,90%,50%,1.00);border-radius: 5px; padding: 1px 10px ; background-color: #555}
dd a.sp {line-height: 1em}

ol.origi {
  counter-reset: item;
  list-style-type: none;
  padding: 0 0 10px 0 ;
  margin: 0
}
ol.origi ol{
  padding: 0 0 10px 0;
}
ol.origi li{
  text-indent: -1.3em;
  padding-left: 1.3em;
}
ol.origi li:before {
  counter-increment: item;
  content: counter(item)'.';
  /* 以下は自由に装飾... */
  padding-right: .5em;
  font-weight: bold;
}

ol.origi.alpha li:before {
  counter-increment: item;
  content: counter(item,lower-alpha)'.';
  padding-right: .5em;
}

ol.origi.alpha-kakko li:before {
  counter-increment: item;
  content: counter(item,lower-alpha)'.)';
  padding-right: .5em;
}

ol.origi.kakko li:before {
  counter-increment: item;
  content: counter(item)')';
  padding-right: .5em;
}

body#services h3,
body#privacypolicy h3 { border-left: 8px solid hsla(353,82%,35%,1); padding-left: 10px }

.cwr { text-transform: uppercase; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" }

.fadeInStay {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInStay;
 animation-name: fadeInStay;
 visibility: visible !important;
}
@-webkit-keyframes fadeInStay {
 0% { opacity: 0; -webkit-transform: translateY(0); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInStay {
 0% { opacity: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.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); }
}

#link_noindex a,
#link_doui span, 
#link_doui a 
{ display: block; margin: 20px auto; text-align: center; line-height: 1.0em; padding: 20px 10px; border-radius: 6px; font-size: 1.2em; border: 2px solid #fff; color: #fff!important; background-color: hsla(359,88%,47%,.8); font-family: "Midashi Go MB31"; min-width: 280px; width: 70% }

#link_doui span { opacity: .5 }
#link_doui a { opacity: 1 }

a.to-contact { display: block; width: 240px; text-align: center; margin: 20px auto; background-color: hsla(0,100%,42%,.8); font-family: "Midashi Go MB31"; color: #fff!important; border-radius: 6px; border: 1px hsla(0,0%,100%,1) solid; padding: 6px 0; font-size: 1em; line-height: 1em; }

#inquiry a { font-family: "Midashi Go MB31"; color: hsla(353,90%,50%,1.00) }

a.to-contact.pp { width: 300px; margin: 40px auto 60px; }

.juyo_ch { padding: 20px; font-family: "Midashi Go MB31"; font-size: 1.1em;  }
#contact { padding: 50px 0 }
#link_noindex { padding: 30px 0 }
#tsunagiba #link_noindex { padding: 0 0 }

#services dd span { display: block; float: left; background-color: hsla(0,0%,100%,.8); color: #000; width: 50px; text-align: center; padding: 0; border-radius: 2px; margin-right: 6px; }
#services dd span.yonmoji { width: 106px;  }
#services dd span.aki { background-color: hsla(0,0%,100%,0); }

@media only screen/*-----------------------------------------------------横向き-----------------------------------------------------*/
and (orientation:landscape){

/*body { background-color: hsla(21,100%,87%,1.00)}*/
.sp { display: none }
.f-l { float: left } .f-r { float: right}
.f-r { width: 70%; margin: 0 1.5% 0 0 }
.f-l { width: 25%; padding: 0 0 0 1.5% }
.wrap { font-size: 1.0em; line-height: 2.0em; }
.multiphoto div { float: left; width: 33.333333%; margin: 0; padding: 0 }
.flogo img { width:100px; height: auto; padding: 30px 0 0; }
.cwr { padding: 20px 0; font-size: 0.7em; }
h1 span.jp { }
.h2like { font-size: 1.4em; line-height: 1.4em; text-align: center; }
.h2like span.jp {font-size: .8em; line-height: 2.0em; padding-left:10px }
footer aside { padding: 50px 0 }
body.orig footer { padding: 50px 0 100px; }
footer .eng { display: none; }
body#home footer { padding: 20px 0 20px; }
.tng-box { width: 100%; margin: 30px 0; }
.tng { display: inline-block; width: calc(33.3333% - 5px); background-color: hsla(0,0%,100%,.15); margin: 0 5px 5px 0 ; text-align: center; padding: 2px 0; }

#philosophy #photobg01 { background-image: url(../philosophy/pc/01.jpg); background-size: 140% auto; background-position: right bottom; }
#philosophy #photobg02 { background-image: url(../philosophy/pc/02.jpg); background-size: 140% auto; background-position: left bottom; }
#philosophy #photobg03 { background-image: url(../philosophy/pc/03.jpg); background-size: 140% auto; background-position: right bottom; }

#outline #photobg01 { background-image: url(../outline/pc/03.jpg); background-size: 140% auto; background-position: center top; }
#outline #photobg02 { background-image: url(../outline/pc/02.jpg); background-size: 140% auto; background-position: left bottom; }
#outline #photobg03 { background-image: url(../outline/pc/01.jpg); background-size: 140% auto; background-position: right bottom; }

#tsunagiba #photobg01 { background-image: url(../tsunagiba/pc/01.jpg); background-size: 140% auto; background-position: center bottom; }
#tsunagiba #photobg02 { background-image: url(../tsunagiba/pc/02.jpg); background-size: 140% auto; background-position: center bottom; }
#tsunagiba #photobg03 { background-image: url(../tsunagiba/pc/03.jpg); background-size: 140% auto; background-position: center bottom; }

#privacypolicy #photobg01 { background-image: url(../privacypolicy/pc/01.jpg); background-size: 140% auto; background-position: center bottom; }
#privacypolicy #photobg02 { background-image: url(../privacypolicy/pc/02.jpg); background-size: 140% auto; background-position: left bottom; }

#services #photobg01 { background-image: url(../services/pc/01.jpg); background-size: 140% auto; background-position: center top; }
#services #photobg02 { background-image: url(../services/pc/02.jpg); background-size: 140% auto; background-position: center top; }

#recruit #photobg01 { background-image: url(../recruit/pc/01.jpg); background-size: 140% auto; background-position: right bottom; }
#recruit #photobg02 { background-image: url(../recruit/pc/02.jpg); background-size: 140% auto; background-position: left top; }
#recruit #photobg03 { background-image: url(../recruit/pc/03.jpg); background-size: 140% auto; background-position: center center; }

#access #photobg01 { background-image: url(../access/mappc.png); background-size: 120% auto; background-position: center center; }

.svg1{ height: 80%; width: auto; margin: 5% auto 0; }
#stage { height: 80%; width: auto; margin: 5% auto 0; }
#stage img{ height: 100%; width: auto; }
main { width: 70%; margin: 50px auto }
dl { border-bottom: hsla(0,0%,100%,.4) solid 1px }
dt, dd { margin: 0; padding: 5px 0; border-top: hsla(0,0%,100%,.4) solid 1px }
dt { float: left; width: 160px; padding-left: 5px }
dd { float: left; width: calc(100% - 165px) }

body#philosophy .abso { bottom: 10%; left: 50% }
body#outline .abso { bottom: 10%; left: 15% }
body#tsunagiba .abso { bottom: 5%; left: 49%; width: 50%!important; 
background-color: hsla(0,0%,13%,0); margin: 200px 0 0 0; padding: 0; }
body#tsunagiba .abso h1 { width: 70%; }

body#privacypolicy .abso { bottom: 5%; left: 25% }
body#recruit .abso { bottom: 10%; left: 40% }
body#access .abso { bottom: 5%; left: 29% }

body.page .h1like, 
body#home h1 { top: 50px; left: 45px; }

body#home h1 img,
body.page .h1like img { width: 200px; height: auto; }

body#tsunagiba #link_noindex { z-index: 10; left: 25px; top: 350px; max-width: 350px }

header { position: absolute; left: 0; top: 0; z-index: 5; padding: 50px; width: 25% }
header ul { padding: 130px 0 0 0!important; }
header ul li { position: relative; padding: 5px 0 }
header ul li a { display: block ; }
header ul li a span.eng { font-size: 1.4em; }
header ul li a span.jp { font-size: 0.9em; position: absolute; top: 5px; left: 190px; opacity: 0 }

header ul li a span.jp {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all  0.5s ease;
}
header ul li a:hover span.jp, header ul li a:focus span.jp { opacity: 1 }
body#philosophy header ul li.philosophy a,
body#outline header ul li.outline a,
body#services header ul li.services a,
body#privacypolicy header ul li.privacypolicy a,
body#tsunagiba header ul li.tsunagiba a,
body#access header ul li.access a,
body#recruit header ul li.recruit a
{ opacity: 1 }

body#philosophy footer aside a.philosophy,
body#outline footer aside a.outline,
body#privacypolicy footer aside a.privacypolicy,
body#services footer aside a.services,
body#tsunagiba footer aside a.tsunagiba,
body#access footer aside a.access,
body#recruit footer aside a.recruit,
footer aside a:hover { color: hsla(1,66%,50%,1.00); opacity: 1 }

footer aside a,
header ul li a span.jp {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all  0.5s ease;
}

.feed-box { max-width: 800px; margin: 20px auto; }

#services dl { width: 700px; border-bottom-width: 0; margin: 0 0 0 20px; }
#services dl:last-child { border-bottom-width: 1px; }
#services dt { float: left; width: 400px; margin: 0; padding: 10px 0 10px 10px }
#services dd { float: right; width: 280px; margin: 0; padding: 10px 10px 10px 0 }

#services .nodd dt { width: 680px; margin: 0; padding: 6px 0 6px 10px }
#services .nodd dd { width: 0px;  }

#inquiry dl { border-width: 0 }
#inquiry dt { border-width: 0 }
#inquiry dd { border-width: 0 }

#services #inquiry dl { border: 1px hsla(0,0%,100%,.5) solid; padding: 5px }

}

@media only screen/*-----------------------------------------------------スマホ横向き-----------------------------------------------------*/
and (min-device-width:320px) 
and (max-device-width:480px) 
and (orientation:landscape){

body { font-size: 1.0rem; line-height: 1.7rem }
header ul { padding: 40px 20% 0 0!important; }
header ul li a  { }
header ul li a:hover span.jp, header ul li a:focus span.jp { opacity: 0 }

body.page .h1like, 
body#home h1 { top: 30px; left: 45px;  }
body#home h1 img,
body.page .h1like img { width: 140px; height: auto; }

body#philosophy .abso { bottom: 14%; left: 50% }
body#outline .abso { bottom: 14%; left: 30% }
body#services .abso { bottom: 14%; left: 30% }
body#tsunagiba .abso { bottom: 14%; right: 10% }
body#privacypolicy .abso { bottom: 5%; left: 25% }
body#recruit .abso { bottom: 10%; left: 40% }
body#access .abso { bottom: 5%; left: 29% }
footer { font-size: .7em }

body#privacypolicy main { font-size: 0.7em; line-height: 1.3em }
.kakomi .phj img{ width: 100%; padding: 0 0% }

}
/*タブレット共通*/

@media only screen/*-----------------------------------------------------縦向き-----------------------------------------------------*/
and (orientation:portrait){
.pc { display: none } 

.feed-box { max-width: 90%; margin: 0 auto; }

.svg1{ width: auto; height: 50%; margin: 40% auto 0; }
#stage { width: auto; height: 50%; margin: 40% auto 0; }
#stage img{ width: auto; height:100%; }

body#home h1 { top: 5%; left: 30%; }
body#home h1 img { width: 60%; height: auto; }
body.page .h1like { top: 5%; left: 35%; }
body.page .h1like img { width: 50%; height: auto; }
body.page h1 { }
h1 span.jp { font-size: .7em; }
.multiphoto div { float: left; width: 50%; margin: 0; padding: 0 }
.h2like { font-size: 1.2em; line-height: 1.2em; text-align: center; }
.h2like span.jp {font-size: .8em; line-height: 2.0em; padding-left:10px }
.tng-box { width: 80%; margin: 30px 10%; }
.tng { display: inline-block; width: 100%; background-color: hsla(0,0%,100%,.15); margin: 5px 0; text-align: center; padding: 5px 0; }

#navToggle {
display: none;
position:absolute;left:0px; top:0px;
width:30px;height:25px;padding: 18px 14px 16px 15px;
cursor:pointer;
z-index: 100;
background-color: hsla(353,82%,35%,.5);
}
#navToggle div {position:relative}
#navToggle span {
display:block;
position:absolute;/*to div*/
width:100%;
border-bottom:solid 2px #fff;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out}
#navToggle span:nth-child(1) {top:0}
#navToggle span:nth-child(2) {top:11px}
#navToggle span:nth-child(3) {top:22px}

header nav { background-color: hsla(0,0%,0%,0.70); z-index: 5 }

header { width: 100% ; z-index: 6 }
header { position: fixed; z-index: 5; width: 100%; }
header { right: 0;top: 0; }
footer aside { border-bottom: hsla(0,0%,100%,.6) 1px solid; } 
header ul { border-bottom: hsla(0,0%,100%,.6) 1px solid; padding: 120px 0 0 } 
footer aside a,
header ul li a { display: block; border-top: hsla(0,0%,100%,.6) 1px solid; padding: 10px 0; margin: 0; color: #fff; text-align: center; background-color: hsla(0,0%,0%,1.0); }

body#philosophy header ul li.philosophy a, body#philosophy footer aside a.philosophy,
body#outline header ul li.outline a, body#outline footer aside a.outline,
body#services header ul li.services a, body#services footer aside a.services,
body#privacypolicy header ul li.privacypolicy a, body#privacypolicy footer aside a.privacypolicy,
body#tsunagiba header ul li.tsunagiba a, body#tsunagiba footer aside a.tsunagiba,
body#access header ul li.access a, body#access footer aside a.access,
body#recruit header ul li.recruit a, body#recruit footer aside a.recruit,
footer aside a:hover,
header ul li a:hover { background-color: hsla(1,68%,20%,1.00); opacity: 1 }
footer aside a span.eng,
header ul li a span.eng { font-size: 1.2em; padding-right: 10px }

header nav {
position:absolute;
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
}
header ul { margin:0 }
footer aside a,
header ul li a { display:block; }
header ul li::after { content:''}
header ul li:last-child { border-bottom:none}

dt { margin: 0; padding: 5px 8px; border: hsla(0,0%,100%,.4) solid 1px }
dd { margin: 0; padding: 10px 8px; border-top: hsla(0,0%,100%,.4) solid 0px }
.kakomi { padding: 20px }

#services dl { width: calc(100% - 20px); border-bottom-width: 0; margin: 0 0 20px 0; }
#services dl:last-child { border-bottom-width: 1px; }
#services dt { float: none; width: calc(100% - 20px); margin: 0; padding: 6px 10px 6px 10px }
#services dd { float: none; width: calc(100% - 0px); margin: 0; padding: 10px 0 10px 0 }
#services dd span { width: calc(20% - 5px); }
#services dd span:last-child { margin: 0 }
#services .nodd dd { display: none;  }

#inquiry dt { border-width: 0 }
#inquiry dd { border-width: 0 }

#inquiry dl { border-width: 0 }
#inquiry dt { border-width: 0 }
#inquiry dd { border-width: 0 }

#services #inquiry dl { border: 1px hsla(0,0%,100%,.5) solid; padding: 5px }
/* Toggle(Button) */
#navToggle {display: block}
/* Click Toggle(Button) */
.openNav #navToggle span:nth-child(1) {
top: 11px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg)}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
top: 11px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg)}

#philosophy #photobg01 { background-image: url(../philosophy/sp/01.jpg); background-size: 140% auto; background-position: right bottom; }
#philosophy #photobg02 { background-image: url(../philosophy/sp/02.jpg); background-size: 140% auto; background-position: left bottom; }
#philosophy #photobg03 { background-image: url(../philosophy/sp/03.jpg); background-size: 140% auto; background-position: right bottom; }

#outline #photobg01 { background-image: url(../outline/sp/01.jpg); background-size: 140% auto; background-position: right bottom; }
#outline #photobg02 { background-image: url(../outline/sp/02.jpg); background-size: 140% auto; background-position: left bottom; }
#outline #photobg03 { background-image: url(../outline/sp/03.jpg); background-size: 140% auto; background-position: right bottom; }

#tsunagiba #photobg01 { background-image: url(../tsunagiba/sp/01.jpg); background-size: 140% auto; background-position: center bottom; }
#tsunagiba #photobg02 { background-image: url(../tsunagiba/sp/02.jpg); background-size: 140% auto; background-position: center bottom; }
#tsunagiba #photobg03 { background-image: url(../tsunagiba/sp/03.jpg); background-size: 140% auto; background-position: center bottom; }

#privacypolicy #photobg01 { background-image: url(../privacypolicy/sp/01.jpg); background-size: 140% auto; background-position: right top; }
#privacypolicy #photobg02 { background-image: url(../privacypolicy/sp/02.jpg); background-size: 140% auto; background-position: left top; }

#services #photobg01 { background-image: url(../services/sp/01.jpg); background-size: 140% auto; background-position: center top; }
#services #photobg02 { background-image: url(../services/sp/02.jpg); background-size: 140% auto; background-position: center top; }

#recruit #photobg01 { background-image: url(../recruit/sp/01.jpg); background-size: 140% auto; background-position: right bottom; }
#recruit #photobg02 { background-image: url(../recruit/sp/02.jpg); background-size: 140% auto; background-position: left bottom; }
#recruit #photobg03 { background-image: url(../recruit/sp/03.jpg); background-size: 140% auto; background-position: right bottom; }

#access #photobg01 { background-image: url(../access/mapsp.png); }

body#outline .txt br,
body#tsunagiba .txt br,
body#privacypolicy .txt br
{ display: none; }

.flogo img { padding: 50px 0 10px; width:60px; height: auto; }
.cwr { padding: 20px 0; font-size: 0.5em; }
body#home footer { padding: 20px 0 20px; text-align: center; }
}

@media screen and (min-width: 641px)/* PC */ { 
header nav { width:100%; top:-2201px; left:0; height: 2200px; } 
header nav ul { margin-top: 70px; }
.openNav nav {-moz-transform: translateY(2201px);-webkit-transform: translateY(2201px);transform: translateY(2201px) }
.f-l { float: left } .f-r { float: right}
.f-r { width: 65%; margin: 0 }
.f-l { width: 35%; padding: 0 }
main { width: 75%; margin: 50px auto }
#access .wrap { width: 80%; margin: 0 auto }
#access #photobg01 { background-size: 110% auto; background-position: center center; }
.kakomi .phj img{ width: 100%; padding: 0 0% }

body#philosophy .abso { bottom: 20%; left: 30%; width: 60%; }
body#outline .abso { bottom: 5%; left: 15%; width: 70% }
body#services .abso { bottom: 5%; right: 0%; width: 40% }
body#tsunagiba .abso { top: 20%; right: 15%; width: 70% }
body#privacypolicy .abso { bottom: 3%; left: 5%; width: 90% }
body#recruit .abso { bottom: 5%; left: 0; text-align: center; width: 100%;  }
body#access .abso { bottom: 10%; left: 10% }
}

body#services .archwrap .dl a { display: block; text-align: center; width: 100%;font-size: 1em; line-height: 1em; padding: .5em 0; border: 1px #fff solid; border-radius: 6px; background-color: hsla(353,82%,35%,1) }

@media screen and (min-width: 1001px)/* PC */ { 
header nav { width:100%; }
header nav ul { margin-top: 70px; }
.f-l { float: left } .f-r { float: right}
.f-r { width: 65%; margin: 0 }
.f-l { width: 35%; padding: 0 }
main { width: 75%; margin: 50px auto }

body#services main { width: 75%; margin: 50px 100px; padding: 0 0 0 0 }
#archves { position: sticky; width: 270px; top: 30px; z-index: 100; background-color: hsla(353,82%,35%,.0) }  
body#services h3, body#services dl { margin-left: 300px!important }  
#ceremony { margin-top: -515px!important }  
body#services .archwrap { padding-top: 60px; padding-bottom: 70px; position: relative; background-color: hsla(353,82%,35%,.0) ; }
body#services .archwrap .dl { position: absolute; z-index: 101; left: 470px; bottom: 0; width: 340px; }
body#services .archwrap .dl a { color: #000 }

.step a::before { content: "■"; color: hsla(353,82%,35%,0)}
.step a.current::before { color: hsla(353,82%,35%,1) }
#archves ul{ margin: 0; padding: 0; }
#archves ul li { margin: 0; padding: 0; list-style: none }
#archves ul li a { display: block; padding: 5px 0;}

#access .wrap { width: 80%; margin: 0 auto }
#access #photobg01 { background-size: 110% auto; background-position: center center; }
.kakomi .phj img{ width: 100%; padding: 0 0% }

body#philosophy .abso { bottom: 20%; left: 30%; width: 60% }
body#outline .abso { bottom: 5%; left: 15%; width: 70% }
body#services .abso { bottom: 5%; right: 0%; width: 35% }
body#tsunagiba .abso { top: 20%; right: 15%; width: 70% }
body#privacypolicy .abso { bottom: 3%; left: 5%; width: 90% }
body#recruit .abso { bottom: 5%; left: 0; text-align: center; width: 100%;  }
body#access .abso { bottom: 10%; left: 10% }
body#services footer { padding-bottom: 900px;  padding-top: 200px; }

}/*end 641px*/

@media screen and (max-width: 640px)/* スマホ*/ { 
header nav { top:-1001px; left:0; width:100%;height: 1000px; } 
.openNav nav {-moz-transform: translateY(1001px);-webkit-transform: translateY(1001px);transform: translateY(1001px) }
header nav ul li a {}
main { width: 90%; margin: 50px auto }
.kakomi .phj img{ width: 70%; padding: 0 15% }
#access #photobg01 { background-size: 110% auto; background-position: center center; }

body#philosophy .abso { bottom: 5%; left: 5%; width: 90% }
body#outline .abso { bottom: 5%; left: 5%; width: 90% }
body#services .abso { bottom: 5%; left: 5%; width: 90% }
body#tsunagiba .abso { top: 15%; right: 5%; width: 90% }
body#privacypolicy .abso { bottom: 3%; left: 5%; width: 90% }
body#recruit .abso { bottom: 5%; left: 0; text-align: center; width: 100%;  }
body#access .abso { bottom: 10%; left: 10% }

body#services .archwrap { padding-bottom: 70px; position: relative; }
body#services .archwrap .dl { position: absolute; z-index: 101; left: 0; bottom: 20px; width: calc(100% - 20px); }
body#services .archwrap .dl a {  }

body#services #exhibition.archwrap { padding-bottom: 30px; }
body#services #inquiry.archwrap { padding-top: 70px; }

a.keibi { margin: 10px 0 10px 0; }

}/*end 640px*/