@charset "utf-8";

@keyframes flapInTheWind {
    0% {
	border-bottom-right-radius: 20% 50px;
	-webkit-box-shadow: inset -20px -20px 5px -20px rgba(0, 0, 0, .1);
    }
    100% {
	border-bottom-right-radius: 40% 60px;
	-webkit-box-shadow: inset -20px -20px 15px -20px rgba(0, 0, 0, .1);
    }
}

html.flow01 {background:#f2f1e5;}

body {
  font-family:  "Noto Serif JP",'YuMincho','Yu Mincho','游明朝',"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size:3.75vw;
  font-weight:normal;
  font-weight:200;
  line-height:1.8;
  color:#000;
  opacity:0;
  transition:1s;
} 

body.onload {opacity:1;}
body.c_select.onload {opacity:1;transition:3s;}



.lato {font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight:normal;}
.noto {font-family: 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

img {max-width:100%;max-height:100%;}
figure img {display:block;margin:0 auto;}

.flow01 h1 {
  width:70%;
  max-width:400px;
  text-align:center;
  font-size:1.4em;
  margin:0 auto 10%;
}

.flow01 h1 + figure {width:70%;margin:0 auto 5%;}

.flow01 h2 {
  width:100%;
  text-align:center;
  font-size:1.6em;
  margin:0 auto 10%;
}

.flow01 h2 + figure {width:60%;margin:0 auto 5%;}
.flow01 h2 + figure img {/*border-radius:50%;*/border:solid 5px #FFFFFF;}

.flow01 body {
  box-sizing:border-box;
  width:100vw;
  min-width:100vw;
  height:100%;
  overflow:hidden;
  min-height:100%;
} 

.flow01 main {
  /*position:relative;*/
  width:100vw;
  /*max-width:800px;*/
  margin:0 auto;
  height:100%;
  z-index:1;
}

.flow01 main section {
  position:absolute;
  box-sizing:border-box;
  width:100vw;
  /*max-width:800px;*/
  height:100%;
  margin:auto;
  padding:8em 1em 5em;
  left:0;
  right:0;
  bottom:0;
  transition:1s ease-in-out ;
  color:#485157;
}

.flow01 main section.slide {
  bottom:120%;
  animation:flapInTheWind 0.5s forwards;
}

.flow01 main section#sec01 {background:#f2f1e5;z-index:5;}
.flow01 main section#sec02 {background:#b49b76;z-index:4;}
.flow01 main section#sec03 {background:#f2f1e5;z-index:3;}
.flow01 main section#sec04 {background:#b49b76;z-index:2;padding:10% 1em;}
section#sec05 {background:#f2f1e5;z-index:0;padding:1.5em 0.5em;height:100%;/*min-height:100%;*/display:none;}

.flow01 main section#sec01 figure {width:70%;height:20em;position:absolute;display:block;margin:auto;top:0;bottom:0;right:0;left:0;}
.flow01 main section#sec02 div.mes {position:absolute;height:26em;margin:auto;top:0;bottom:0;left:0;right:0;}
.flow01 main section#sec03 div.mes {position:absolute;height:30em;margin:auto;top:0;bottom:0;left:0;right:0;}
.flow01 main section#sec02 div.mes p {line-height:2;margin:0 0 1em;}
.flow01 main section#sec02 div.mes p:nth-last-of-type(1) {margin:0;}

.flow01 main section#sec02 p {text-align:center;color:#FFFFFF;}
.flow01 main section#sec03 p {text-align:center;font-size:1.2em;max-width:90%;margin:0 auto;}
.flow01 main section#sec03 p.date {text-align:center;font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight:300;}
.flow01 main section#sec04 div.message {
  box-sizing:border-box;
  width:100%;
  height:90%;
  padding:5% 0;
  background:#FFFFFF;
  border-radius:5px;
  box-shadow:2px 2px 10px 2px #8C785C;
  
}
section#sec05 p {text-align:center;font-size:0.9em;}
section#sec05 p {line-height:2em;margin:0 0 1em;}
section#sec03 figure {width:50%;margin:1em auto;}
section#sec05 figure {width:50%;margin:1.5em auto;}

section#sec05 >.sc_box {box-sizing:border-box;overflow-y:scroll;height:calc(100vh - 3em);padding:1.5em 1em;}

.flow01 main section p.scroll {
  font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  position:absolute;
  left:0;
  right:0;
  text-align:center;
  font-weight:300;
  bottom:4em;
}

.flow01 main section p.scroll::after {
  position:absolute;
  display:block;
  content:"";
  width:1em;
  height:1em;
  transform:rotate(45deg);
  border-right:solid 1px #485157;
  border-bottom:solid 1px #485157; 
  margin:auto;
  left:0;
  right:0;
}

.flow01 main section#sec02 p.scroll::after ,
.flow01 main section#sec04 p.scroll::after {
  border-right:solid 1px #FFFFFF;
  border-bottom:solid 1px #FFFFFF; 
}
  
section#sec05 p.tonext {
  width:70%;
  font-size:1em;
  font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  margin:1.5em auto 5em;
  text-align:center;
  font-weight:normal;
}

section p.tonext a {
  display:block;box-sizing:border-box;
  width:100%;
  height:100%;
  padding:0.2em 0.5em;
  background:#b49b76;
  box-shadow:0 5px 0 #9e8360;
  border-radius:3px;
  text-decoration:none;
  color:#FFFFFF;
}

/* メッセージ本文 */
.flow01 main .message p {
  position:relative;
  box-sizing:border-box;
  /*padding:6% 5% 6% 5%;*/
  width:94%;
  z-index:1;
  font-size:1.05em;
  height:100%;
  margin:0 auto;
  color:#666;
  overflow-y:scroll;
}

.flow01 #sec05 .sc_box::-webkit-scrollbar {width: 8px;}
.flow01 #sec05 .sc_box::-webkit-scrollbar-track {box-shadow: inset 0 0 4px rgba(0,0,0,0.3);border-radius: 6px;}
.flow01 #sec05 .sc_box::-webkit-scrollbar-thumb {border-radius: 6px;box-shadow: inset 0 0 4px rgba(0,0,0,0.5);}


.flow01 main #sec04 .message p::-webkit-scrollbar {
  box-sizing:border-box;
  width:11px;
  border-left:solid 5px #FFFFFF;
  border-right:solid 5px #FFFFFF;
  background:#dadcdd;
}
.flow01 main #sec04 .message p::-webkit-scrollbar-thumb {
  background:#b49b76;
  border-radius:5px;
  position:relative;
  z-index:10;
}


/* メッセージ本文分割 */
.flow01 main .message p span {
  display:inline-block;
  opacity:0;
  z-index:1;
}
.flow01 main .message p span span {min-width:0.35em;}
.flow01 main .message p span.head {display:block;font-weight:bold;font-size:1.1em;color:#b49b76;}
.flow01 main .message p span + span.head {margin:1em 0 0;padding:1em 0 0;border-top:solid 1px #b49b76;}
.flow01 main .message p > span {display:block;min-height:1em;}

main.flow02 {background:#f2f1e5;}
/*
main.flow02 span#loading {
  position:absolute;
  display:block;
  content:"";
  margin:auto;
  top:15%;
  bottom:0;
  right:0;
  left:0;
  width:11em;
  height:8em;
  background:url(../img/guest/loading.gif) no-repeat center / 100%;
  display:none;
  z-index:99;
}*/

main.flow02 span#loading {
  position:absolute;
  display:block;
  content:"";
  width:100%;
  height:100%;
  margin:auto;
  top:0;
  bottom:0;
  right:0;
  left:0;
  background:url(../img/guest/loading.gif) no-repeat center / 80%,rgba(0,0,0,0.4);
  display:none;
  z-index:99;
}

main.flow02 span#loading.loadingnow {display:block;}



.flow02 h1 {font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;margin:0 auto 0.5em;text-align:center;line-height:1.4;font-size:1.8em;color:#b49b76;font-weight:300;}
.flow02 h1 span {display:block;font-weight:500;}


.flow02 h1 + p {margin:0 auto 1.5em;text-align:center;}
.flow02 h1 + p span.fs80 {font-size:0.85em;display:block;margin-top:0.5em;}
.flow02 {background:#eeeeee;min-height:100vh;box-sizing:border-box;}
.flow02 .slider {margin:0 0 30px;}
.flow02 .slider li {margin:10px;background:#FFFFFF;border-radius:4px;box-shadow:0 0 3px 3px rgba(180,155,118,0.2);}
.flow02 .slider li input {display:none;}
.flow02 .slider li input + label {
  position:relative;
  display:block;
  width:100%;
  height:0;
  padding:100% 0 0;
  cursor:pointer;
  border-radius:4px;
}
.flow02 .slider li input:checked + label {background:#b49b76;}

.flow02 .slider li .char_select {position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;width:92%;height:92%;background:#FFFFFF;border:solid 1px #b49b76;}
.flow02 .slider li .char_select span {
  position:absolute;
  display:block;
  content:"";
  width:90%;
  height:80%;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  text-align:center;
  line-height:1.4;
  font-size:1.8em;
  color:#b49b76;
  font-weight:400;
  letter-spacing:0.2em;
}
.flow02 .slider li .char_select span.skate {font-size:1.6em;letter-spacing: 0.1em;}
.flow02 .slider li .char_select span img {
  position:absolute;
  left:0;
  right:0;
  bottom:10%;
  margin:auto;
}
.flow02 .slider li .char_select span.dog img {width:80%;}
.flow02 .slider li .char_select span.cat img {width:75%;}
.flow02 .slider li .char_select span.owl img {width:75%;}
.flow02 .slider li .char_select span.squirrel img {width:75%;}
.flow02 .slider li .char_select span.bike img {width:75%;bottom:0;}
.flow02 .slider li .char_select span.skate img {width:60%;bottom:0;}
.flow02 .slider li .char_select span.runner img {width:45%;bottom:0;}
.flow02 .slider li .char_select span.parachute img {width:40%;bottom:0;}
.flow02 .slider li .char_select span.plane img {width:70%;}
.flow02 .slider li .char_select span.wagon img {width:80%;bottom:0;}
.flow02 .slider li .char_select span.robot img {width:50%;bottom:0;}
.flow02 .slider li .char_select span.monster img {width:55%;bottom:0;}



@keyframes bg_slide {
  0% {background-position:left 0 bottom -2%;}
  100% {background-position:left 100% bottom -2%;}
}

@keyframes bg_slide02 {
  0% {background-position:left 0 top;}
  100% {background-position:left 100% top;}
}

.flow02 div.view_area {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  
  overflow:hidden;
}
.flow02.check {padding-top:2em;}
.flow02.check div.view_area {
  position:relative;
  height:0;
  padding:60% 0 0;
  margin:0 auto 5%;
  border:solid 1px #EAEAEA;
background: rgba(212,234,242,1);
background: -moz-linear-gradient(top, rgba(212,234,242,1) 0%, rgba(239,248,250,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(212,234,242,1)), color-stop(100%, rgba(239,248,250,1)));
background: -webkit-linear-gradient(top, rgba(212,234,242,1) 0%, rgba(239,248,250,1) 100%);
background: -o-linear-gradient(top, rgba(212,234,242,1) 0%, rgba(239,248,250,1) 100%);
background: -ms-linear-gradient(top, rgba(212,234,242,1) 0%, rgba(239,248,250,1) 100%);
background: linear-gradient(to bottom, rgba(212,234,242,1) 0%, rgba(239,248,250,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4eaf2', endColorstr='#eff8fa', GradientType=0 );
  
}

.flow02.check div.view_area >span {position:absolute;display:block;content:"";width:100%;height:80%;top:0;left:0;}
.flow02.check div.view_area >span.near {z-index:2;background:url(../img/animation/near_sp.png) repeat-x bottom 0 left 0 / auto 50%;animation:bg_slide 20s linear infinite;}
.flow02.check div.view_area >span.middle{z-index:1;background:url(../img/animation/middle_sp.png) repeat-x bottom 40% left 0 / auto 100%;animation:bg_slide 60s linear infinite;}
.flow02.check div.view_area >span.far{z-index:0;background:url(../img/animation/far_sp.png) repeat-x  left 0 / auto 50%;animation:bg_slide02 120s linear infinite;}

.flow02 div.view_area::after {
  position:absolute;
  display:block;
  content:"";
  width:100%;
  height:20%;
  background:#FFFFFF;
  bottom:0;
  left:0;
}

.flow02 div.area {width:90%;margin:0% auto;text-align:center;border-radius:4px;box-shadow:0 0 3px 1px rgba(140,120,92,0.1);background:#FFFFFF;}
.flow02.check div.area {box-sizing:border-box;background:#FFFFFF;padding:2%;text-align:left;overflow:hidden;margin:0 auto 5%;box-shadow:2px 2px 5px 2px rgba(140,120,92,0.2);}
.flow02.check div.area figure {width:60%;margin:5% auto;text-align:center;}
.flow02.check div.area p > span {display:block;min-height:1em;}

.flow02.check div.area .guest_name {font-size:1em;text-align:center;color:#b49b76;font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight:300;}
.flow02.check div.area .guest_name span {font-size:1.2em;font-family:"Noto Serif JP",'YuMincho','Yu Mincho','游明朝',"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.flow02 div.message_area {height:18em;padding:3% 0;margin:0 auto 2em;border-radius:10px;overflow:hidden;}
.flow02 div.message_area textarea {resize: none;border-radius:10px;width:94%;min-height:100%;box-sizing:border-box;border:none;padding:1em;height:auto;text-align:left;font-family:  "Noto Serif JP",'YuMincho','Yu Mincho','游明朝',"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;font-size:1.1em;color:#485157;overflow-y:scroll;}


/*.flow02 div.message_area textarea::-webkit-scrollbar {width: 8px;}
.flow02 div.message_area textarea::-webkit-scrollbar-track {box-shadow: inset 0 0 4px rgba(0,0,0,0.3);border-radius: 6px;}
.flow02 div.message_area textarea::-webkit-scrollbar-thumb {border-radius: 6px;box-shadow: inset 0 0 4px rgba(0,0,0,0.5);}*/


.flow02 div.message_area textarea::-webkit-scrollbar {
  box-sizing:border-box;
  width:11px;
  border-left:solid 5px #FFFFFF;
  border-right:solid 5px #FFFFFF;
  background:#dadcdd;
}
.flow02 div.message_area textarea::-webkit-scrollbar-thumb {
  background:#b49b76;
  border-radius:5px;
  position:relative;
  z-index:10;
}





.flow02 div.name_area {margin:30% auto;background:none;border:none;box-shadow:none;}
.flow02 div.name_area input {width:80%;text-align:left;border:none;border-radius:5px;padding:0.7em;color:#485157;font-size:1.2em;}
.flow02 div.photo_area {position:relative;display:block;width:18em;height:18em;margin:0 auto 2em;z-index:0;background:url(../img/guest/uploder.png) no-repeat center / cover;overflow:hidden;}
.flow02 input#imageSelect + label {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow:hidden;}

.flow02 #upload {opacity:0;}
.flow02 #upload.uploadnow {opacity:1;transition:0.5s;}

.flow02 #canvas {box-sizing:border-box;position:absolute;margin:auto;top:-100%;bottom:-100%;left:-100%;right:-100%;overflow:hidden;z-index:1;max-width:100%;max-height:100%;}
.flow02 #preview{box-sizing:border-box;position:absolute;display:block;width:auto;height:auto;margin:auto;top:-100%;bottom:-100%;left:-100%;right:-100%;z-index:2;max-width:100%;max-height:100%;}
.flow02 label > img 
{display:none;}

.flow02 form .button {text-align:center;padding:0 0 1.5em;}
.flow02 form .button .next ,
.flow02 .button .next {
	  font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;	  display:inline-block;
  min-width:6em;
  box-sizing:border-box;
  padding:0.4em 1em;
  margin:0 0.5em;
  background:#b49b76;
  box-shadow:0 5px 0 #9e8360;
  border-radius:3px;
  text-decoration:none;
  color:#FFFFFF;
  font-weight:normal;
  text-align:center;
  font-size:0.9em;
}

.flow02 form .button .back {
  font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;	
  display:inline-block;
  min-width:6em;
  box-sizing:border-box;
  padding:0.4em 1em;
  margin:0 0.5em;
  background:#888e92;
  box-shadow:0 5px 0 #485157;
  border-radius:3px;
  text-decoration:none;
  color:#FFFFFF;
  font-weight:normal;
  text-align:center;
  font-size:0.9em;
}
.flow02 p.button_hint {font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;text-align:center;margin:0 auto 1.5em;}
.flow02 span.hint ,
.flow02 .button .hint {
  font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  display:inline-block;
  min-width:6em;
  box-sizing:border-box;
  padding:0.3em 1em;
  margin:0 auto 1.5em;
  background:#FFFFFF;
  box-shadow:0 5px 0 #e1d7c8;
  border-radius:3px;
  text-decoration:none;
  color:#b49b76;
  font-weight:normal;
  text-align:center;
  border:none;
  font-size:0.9em;
}
div.modal {
  position:fixed;
  width:85%;
  height:80%;
  border-radius:6px;
  background:#FFFFFF;
  z-index:10;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity:0;
  text-align:center;
  visibility:hidden;
  transition:1s;
}
div.modal img {width:auto;height:100%;}

div.modal.open {
  visibility:visible;
  opacity:1;
}
div.modal_bg {
  position:fixed;
  content:"";
  width:100vw;
  height:100vh;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(72,81,87,0.75);
  z-index:1;
  opacity:0;
  visibility:hidden;
  transition:1s;
}
div.modal.open + div.modal_bg {
  visibility:visible;
  opacity:1;
}
div.modal > img {
  position:absolute;
  width:auto;
  height:80%;
  max-height:682px;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.modal p.close{
  position:absolute;
  display:block;
  width:2em;
  height:2em;
  margin:0;
  padding:0.5em;
  border-radius:50%;
  background:#485157;
  top:-1.5em;
  right:-1.5em;
  z-index:11;
  cursor:pointer;
}
.modal p.close::before ,
.modal p.close::after {
  position:absolute;
  display:block;
  content:"";
  width:1.6em;
  height:0.2em;
  z-index:1;
  margin:auto;
  top:1.4em;
  right:0.65em;
  background:#FFFFFF;
  transform-origin:center;
}
.modal p.close::before {transform:rotate(45deg);}
.modal p.close::after {transform:rotate(-45deg);}

.flow02 div.hint_text.fadein p.close {position:relative;width:8em;background:none;text-align:center;color:#FFFFFF;padding:0 0 0 3em;margin:1em auto 0;}
.flow02 div.hint_text.fadein p.close::before {transform:rotate(45deg);}
.flow02 div.hint_text.fadein p.close::after {transform:rotate(-45deg);}

.flow02 ul.status {
  width:100%;
  text-align:center;
  overflow:hidden;
  margin:0 auto 5%;
}
.flow02 ul.status li {
  width:2em;
  height:2px;
  display:inline-block;
  background:#c9caca;
  margin:0 2px;
}
.flow02 ul.status li.active {background:#b49b76;}

.flow02 div.title {width:70%;margin:6% auto;color:#b49b76;text-align:center;}
.flow02 div.title p.date {margin:0 auto 1em;font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight:300;}
.flow02 div.title p.title img {width:100%;}
.flow02 div.title p.host_name {margin:0.5em auto 0;font-family: 'Lato','游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight:300;}
.flow02 div.title p.host_name span {display:inline-block;font-family:  "Noto Serif JP",'YuMincho','Yu Mincho','游明朝',"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.flow02 p.back_link {
  text-align:right;
  margin:0 0 2em;
}

.flow02 p.back_link a {color:#a3a8ab;}

main.guest_comp {padding-top:20%;}
main.guest_comp figure {width:50%;margin:2em auto 3em;}
main.guest_comp p {text-align:center;margin:0 auto 1em;line-height:2;}


/* 新郎新婦 */
.flow02 .host {
  position:absolute;
  left:15%;
  bottom:10%;
  width:5.5em;
  z-index:5;
}
.flow02 .host img {width:100%;}


@media screen and (orientation:landscape) {
  body {font-size:3.5vh;}
  .flow01 main section {padding:1em;}
  .flow01 main section p.scroll {bottom:2em;} 
  .flow01 h2 {margin:0 auto 1em;}
  section#sec03 figure {width:12em;}
  .flow01 main section#sec04 {padding:2em 1em;}
  .flow01 main section#sec03 div.mes {height:26em;}
}


.btn_pds {
  width: 15em;
  height: 4.2em;
  margin: 2em auto 0!important;
}
.btn_pds a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  font-size: 0;
  border: solid 1px #B49B76;
  background: url("../img/guest/logo.svg") no-repeat center / 65%;
  transition: 0.5s;
}
.btn_pds a::before {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 3vw;
  height: 3vw;
  border-top: solid 1px #B49B76;
  border-right: solid 1px #B49B76;
  margin: auto;
  inset: 0 3vw 0 auto;
  transform: rotate(45deg);
  transition: 0.5s;
}
.btn_pds a:hover {
  background: url("../img/guest/logo_w.svg") no-repeat center / 65%,#B49B76;
}
.btn_pds a:hover::before {
  border-top: solid 1px #FFFFFF;
  border-right: solid 1px #FFFFFF;
}