@charset "utf-8";

/*  Top Contents
-----------------------------------------------------------------------------*/
.contents{ box-sizing: border-box; }

/* loading */
.pace {
  width: 55%;
  height: 6px;
  border: none;
  background: #e9e9e9;
  z-index: 3000;
  top: 400px;
  bottom: auto;
}
.pace .pace-progress {
  background: #1dbee5;
  max-width: none;
}
#loading {
  background: #fff;
  text-align: center;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
}
#loading h2{ margin: 300px auto 50px; }


/*common*/
#top section{
  padding: 60px 0;
  position: relative;
}
#top section:before{
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 30px 0 30px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -30px;
  z-index: 2;
}
#top .title{
  margin-bottom: 50px;
  line-height: 22px; 
}

#top .title span:before{
  content: "";
  border-left: 8px solid #1dbee5;
  margin-right: 15px;
  display: inline-block;
  height: 28px;
  vertical-align: sub;
}
#top .btn_center{ margin-top: 40px; }


/*mainv*/
#mainv{
  width: 100%;
  height: 694px;
  border-radius: 8px;
  background: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.cover{
	position: relative;
  height: 100%;
	overflow: hidden;
	pointer-events: none;
}
.cover:after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url(/img/top/mainv/dot.png) repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.mainvimg {
	position: absolute;
	left: 0;
	width: 110%;
	top: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0;
	visibility: hidden;
	animation-name: image;
	animation-duration: 12s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.image1 {
	background-image: url(/img/top/mainv/img01.jpg);
	animation-delay: 0s;
}
.image2 {
	background-image: url(/img/top/mainv/img02.jpg);
	animation-delay: 4s;
}
.image3 {
	background-image: url(/img/top/mainv/img03.jpg);
	animation-delay: 8s;
}
@keyframes image {
	0% {
		z-index: 0;
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}
	33% {
		z-index: 1;
		opacity: 1;
	}
	40% {
		visibility: visible;
	}
	41% {
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		transform: translateX(-9%);
	}
	42% {
		z-index: 0;
		visibility: hidden;
	}
	100% {
		z-index: 0;
		visibility: hidden;
	}
}

#mainv h2 {
  font-size: 26px;
  font-weight: normal;
  color: #33ccff;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 30%;
  margin: 0;
  z-index: 5;
}
#mainv h2 img {
  width: 300px;
  display: block;
  margin: 0 auto 20px;
}
.mainv_btm{
  padding: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  box-sizing: border-box;
}
.mainv_btm img{
  vertical-align: bottom; 
}
.mainv_btm .mainv_link{
  width: 560px;
  text-align: right;
  position: absolute;
  right: 30px;
  bottom: 30px;
}
.mainv_btm .mainv_link img{
  width: 24%;
}
.mainv_btm .mainv_link .beginner img{
  width: 18%;
  border-radius: 50%;
}
.mainv_btm .mainv_banner{
  width: 300px;
  float: left;
}
.mainv_btm .mainv_banner img{
  max-width: 300px;
  height: auto;
}


/* whatsnew */
#top #whatsnew { padding-top: 34px; }

#top #whatsnew dt {
  color: #fff;
  font-size: 18px;
  background: #1dbee5;
  display: inline-block;
  padding: 5px 18px;
  border-radius: 20px;
  float: left;
  margin-top: -8px;  
}
#top #whatsnew dd {
  font-size: 15px;
  line-height: 1.5;
  box-sizing: border-box;
  padding: 0 0 0 170px;
  width: 100%;
}


/* bigbanner */
#top #bigbanner { padding-top: 40px; }

#top #bigbanner > div{
  width: 315px;
  height: 140px;
  margin-right: 12.5px;
}
#top #bigbanner > div:last-child{ margin-right: 0; }

#top #bigbanner:after {
  height: 0;
  display: block;
  clear: both;
  content: " ";
}
#top #bigbanner a img{ width: 100%; }


/*lead*/
#top #lead{ padding-bottom: 0;}
#top #lead h3{
  font-size: 36px;
  font-weight: normal;
  line-height: 1.4;
  color: #1dbee5;
  margin-bottom: 30px;
}
#top #lead p{
  font-size: 16px;
  line-height: 1.95;
  color: #1dbee5;
  margin-bottom: 25px;
}


/* live */
#top #live{ padding-top: 30px; }
#top #live:before{ display: none; }

#top #live ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#top #live li {
  width: 170px;
  position: relative;
  padding: 15px 0 15px;
  min-height:287px;
}

#top #live li a.prof_thumb{ width: 150px; }

#top #live li a.prof_thumb .status_online,
#top #live li a.prof_thumb .status_working,
#top #live li a.prof_thumb .status_offline,
#top #live li a.prof_thumb .status_close,
#top #live li a.prof_thumb .status_event{
  position: absolute;
  top: 0;
  left: -12px;
}
#top #live p.comment{
  margin: 7px;
  font-size: 14px;
  line-height: 1.4;
}
#top #live .link_review span{
  display: inline-block;
  background: url(/img/top/icon_comment.gif) no-repeat 0;
  padding-left: 30px;
  font-size: 13px;
}
#top #live li.new_message::after {
  vertical-align: middle;
  display: inline-block;
  content: url(../../img/icon_message.png);
}
#top #live p.arign_c { text-align: center;}


/* message */
#message .message_list { margin-bottom: 30px;}

#message .message_list dl{
  margin-left: 12px;
  width: 230px;
}
#message .message_list dl > div{ display: inline-block; }

#message .message_list dl dt{
  margin: 0 0 0 10px;
  display: inline-block;
  padding: 14px 0;
}


/* ranking */
#top #ranking{ background: url(/img/bg03.gif); }
#top #ranking h3{ margin-bottom: 0; }

#top #ranking > div{
  display: flex;
  justify-content: space-around;
}
#top #ranking > div > div{
  padding: 20px;
  width: 43%;
}
#top #ranking .note_text{
  color: #666;
  text-align: center;
}
#top #ranking .ranking_slide{
  margin: 30px 0 40px;
  display: flex;
}
#top #ranking .slide_item {
  width: 25%;
  margin-right: 8px;
}
#top #ranking .slide_item:last-of-type { margin-right: 0; }

#top #ranking .slide_item a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
#top #ranking .slide_item a > img {
  width: 42px;
  height: auto;
  display: block;
  margin: 0 auto;
}
#top #ranking .slide_item .img_box {
  margin-top: 15px;
  position: relative;
}
#top #ranking .slide_item .img_wrap {
  border-radius: 7px;
  overflow: hidden;
}
#top #ranking .slide_item .img_wrap img {
  width: 100%;
  height: auto;
}
#top #ranking .slide_item p {
  font-size: 12px;
  margin: 6px 0 3px;
}
#top #ranking .slide_item p em {
  font-size: 15px;
  margin-right: 3px;
}
#top #ranking .slide_item p + div { margin: auto auto 0; }


/* voice */
#top #sec_voice{ background: url(/img/bg02.gif); }
#top #sec_voice:before{ border-color: #f7f7f7 transparent transparent transparent; }
#top #sec_voice h3 span{ color: #fff; }

#sec_voice .voice_list{
  display: flex;
  justify-content: center;
}
#sec_voice .voice_list li {
  background: #fff;
  border-radius: 8px;
  padding: 14px 10px 17px;
  width: 28%;
  margin-right: 12px;
}
#sec_voice .voice_list li:last-child{ margin-right: 0; }

#sec_voice .voice_list .voice_item_head {
  width: 100%;
  margin-bottom: 14px;
}
#sec_voice .voice_list .voice_item_head a {
  padding-bottom: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
#sec_voice .voice_list .voice_item_head a:after {
  content: '';
  width: 100%;
  height: 3px;
  background-image: linear-gradient(to right, #f1f1f1, #f1f1f1 1px, #c4c4c4 2px, #e2e2e2 3px, transparent 4px, transparent 6px);
  background-size: 6px 3px;
  background-repeat: repeat-x;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}
#sec_voice .voice_list .voice_item_head img {
  width: 48px;
  margin-right: 15px;
}
#sec_voice .voice_list .teller_name {
  font-weight: bold;
  font-size: 14px;
  margin-right: 15px;
  max-width: calc(100% - 133px);
}
#sec_voice .voice_list .teller_name em {
  font-size: 14px;
  margin-right: 4px;
}
#sec_voice .user_comment {
  padding: 0 7px;
  line-height: 1.45;
}
#sec_voice .user_comment > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#sec_voice .user_comment dt {
  font-size: 12px;
  padding-left: 40px;
  min-height: 30px;
  background: url(../../../sp/img/voice_icon.png) no-repeat 4px 0;
  background-size: 21px 28px;
  flex: 1;
}
#sec_voice .user_comment > div dd {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  color: #999;
  text-align: right;
  width: 180px;
  font-size: 13px;
}
#sec_voice .user_comment > dd {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  color: #333;
  margin-top: 15px;
  font-size: 16px;
  line-height: 1.6;
}


/*campaign*/
#top #campaign{ background: url(/img/bg04.gif); }
#top #campaign:before{ border-color: #666 transparent transparent transparent; }

#top #campaign > div{
  position: relative;
  padding-bottom: 20px;
}

#top #campaign ul {
  letter-spacing: -0.4em;
  text-align: center;
}
#top #campaign li {
  letter-spacing: 0;
  padding: 0 10px;
  display: inline-block;
}
#top #campaign li img {
  height: auto;
  max-width: 440px;
  border-radius: 5px;
}
#top #campaign > div p a {
  top: 50%;
  margin-top: -30px;
  position: absolute;
}
#top #campaign .prev { left: 0; }
#top #campaign .next { right: 0; }


/*news*/
#top #news:before{ border-color: #d3f3f8 transparent transparent transparent; }

#top #blog:after {
  height: 0;
  display: block;
  clear: both;
  content: " ";
}
#top #blog div { width: 445px; }

#top #blog h3 {
  font-size: 18px;
  color: #1dbee5;
  padding: 0 0 15px;
}
#top #blog dl {
  font-size: 15px;
  letter-spacing: 0;
  position: relative;
  line-height: 1.5;
}
#top #blog dt { position: absolute; }
#top #blog dd { padding: 0 0 10px 165px; }

#top #sns{
  margin-top: 40px;
  text-align: center;
}
#top #sns li{
  padding: 0 10px;
  display: inline-block;
  vertical-align: middle;
}
#top #sns li a{
  border-radius: 30px;
  color: #fff;
  width: 48px;
  height: 48px;
  display: block;
  position: relative;
  text-decoration: none;
}
#top #sns li .fb{ background: #4963a4; }
#top #sns li .fb:hover{ background: rgba(73,99,164,0.7); }
#top #sns li .tw { background: #00b5f0; }
#top #sns li .tw:hover { background: rgba(0,181,240,0.7); }
#top #sns li i{ position: absolute; }

#top #sns li .fb i{
  font-size: 20px;
  top: 15px;
  left: 13px;
}
#top #sns li .tw i {
  font-size: 26px;
  top: 12px;
  left: 7px;
}
#top #sns li .ig img { width: 100%; }


/* media */
#top #media{ background: url(/img/bg01.gif); }

#top #media > img{
  display: block;
  margin: 0 auto;
}
#top #media .media_list img{
  width: 114px;
  height: 126px;
}
#top #media .media_list,
#top #media .media_list ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 10px;
}
#top #media .media_list li{ width: 45%; }

#top #media .media_list li a{
  display: flex;
  padding: 40px 30px 0;
  text-decoration: none;
}
#top #media .media_list li div:last-child{ padding-left: 20px; }


/*scene*/
#top #scene:before{ border-color: #f1f1f1 transparent transparent transparent; }

#top #scene ul.scene_links {
  margin-left: -30px;
  overflow: hidden;
}
#top #scene .scene_links li {
  margin: 0 0 30px 30px;
  width: 220px;
  float: left;
}
#top #scene .scene_links li a { text-decoration: none; }
#top #scene .scene_links li img{ border-radius: 6px; }

#top #scene .scene_links li p {
  font-weight: bold;
  font-size: 18px;
  line-height: 24px;
  padding: 10px 0;
}
#top #scene .scene_links li span {
  line-height: 1.5;
  display: block;
  color: #333;
}


/*reason*/
#top #reason{ background: url(/img/bg05.gif); }

#top #reason div.links {
  margin-left: -10px;
  padding-top: 20px;
  overflow: hidden;
}
#top #reason dl {
  text-align: center;
  margin-left: 70px;
  float: left;
}
#top #reason dl dt {
  font-size: 25px;
  padding-bottom: 10px;
  color: #1dbee5;
}
#top #reason dd p {
  font-size: 16px;
  line-height: 25px;
  padding-top: 15px;
}
#top #reason dd img { border-radius: 50%; }


/*genre*/
#top #genre .genre_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#top #genre .genre_list li{
  width: 15%;
  margin-bottom: 18px;
}
#top #genre .genre_list li a{
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
}


/*intro*/
#top #intro{ background: #666; }
#top #intro h3 span{ color: #fff; }

#top #intro .intro_list{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 880px;
  margin: 0 auto;
}
#top #intro .intro_list li{ width: 135px; }
#top #intro .intro_list a{ text-decoration: none; }

#top #intro .intro_list .img_wrap{
  height: 135px;
  border-radius: 50%;
  overflow: hidden;
}
#top #intro .intro_list .img_wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#top #intro .intro_list p{
  font-size: 16px;
  color: #fff;
  margin-top: 13px;
  line-height: 1.25;
  text-align: center;
}


/*qole*/
#top #qole:before{ border-color: #666 transparent transparent transparent; }

#top #qole img{
  display: block;
  margin: 0 auto;
}
#top #qole p.text{
  width: 83%;
  margin: 0 auto 30px;
  line-height: 1.8;
}


/*about*/
#top #about > div{
  display: flex;
  justify-content: space-between;
}
#top #about > div div{ width: 48%; }
#top #about div img{ width: 100%; }
#top #about div p{ margin-bottom: 15px; 
  line-height: 1.8;}

#top #about div p.note{
  font-size: 13px;
  color: #666;
}


/* entry */
#top #entry{
  background: url(/img/bg01.gif);
  padding: 60px;
}
#top #entry > div{ display: flex; }

#top #entry ul{
  width: 35%;
  padding: 30px 30px 0;
}
#top #entry div.entry_flow{
  width: 65%;
  padding: 30px 30px 0;
}
#top #entry .entry_list li{
  font-size: 20px;
  color: #ccc;
  width: 160px;
  height: 160px;
  text-align: center;
  border-radius: 50%;
  background: #999;
  border: 3px solid #999;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0 auto;
}
#top #entry .entry_list li.net{
  padding-top: 88px;
  margin-bottom: 12px;
}
#top #entry .entry_list li.net:before{
  content: '';
  display: block;
  width: 43.5px;
  height: 69px;
  background: url(/img/icon_phone_sprite.png) bottom no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 13px;
  left: calc(50% - 21.75px);
}
#top #entry .entry_list li.net.active:before{ background-position: top; }
#top #entry .entry_list li.tel{ padding-top: 82px; }

#top #entry .entry_list li.tel:before{
  content: '';
  display: block;
  width: 78.6px;
  height: 66.8px;
  background: url(/img/icon_headset_sprite.png) bottom no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 10px;
  left: calc(50% - 39.3px);
}
#top #entry .entry_list li.tel.active:before{ background-position: top; }

#top #entry .entry_list li.active{
  color: #000;
  background: #fff;
  border-color: #1dbee5;
}
#top #entry .entry_list li span{
  display: block;
  line-height: 1.3;
}
#top #entry .entry_list li.net span{ font-size: 18px; }
#top #entry .entry_list li.tel span{ font-size: 14px; }
#top #entry .entry_list li.active span{ color: #999; }
#top #entry .entry_flow ol{ display: none; }
#top #entry .entry_flow ol.is-show{ display: block; }
#top #entry .entry_flow li{ margin-bottom: 30px; }
#top #entry .entry_flow li.operator{ margin-bottom: 50px; }

#top #entry .entry_flow li .num{
  font-size: 22px;
  color: #fff;
  background: #333;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  box-sizing: border-box;
  padding-top: 5px;
}
#top #entry .entry_flow li p{
  font-size: 16px;
  color: #333;
  line-height: 1.9;
  padding-left: 60px;
}
#top #entry .entry_btn{
  width: 200px;
  display: block;
  border-radius: 5px;
  margin: 5px 0;
  text-decoration: none;
  color: #fff;
  background: #1dbee5;
  padding: 15px 10px;
  text-align: center;
  position: relative;
}
#top #entry .entry_btn:after{
  content: url(/img/icon_arr_white.png);
  position: absolute;
  top: 30%;
  right: 5%;
}
#top #entry .entry_flow img{
  margin: 5px 0;
  display: block;
}
#top #entry .entry_flow .operator img{
  margin-bottom: 10px;
}


/*closeup*/
#top #closeup{ background: url(/img/bg04.gif); }
#top #closeup:before{ border-color: #f1f1f1 transparent transparent transparent; }

#top #closeup > div{
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
}
#top #closeup .column{ padding-left: 25px; }

#top #closeup .column .lead_text{
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 30px;  
}
#top #closeup .column .about h4{ font-size: 19px; }

#top #closeup .column .about h4 span{
  font-size: 14px;
  display: block;
  margin-top: 4px;
}
#top #closeup .column .about dl{ margin: 20px 0 30px; }
#top #closeup .column .about dl dt{ float: left; }
#top #closeup .column .reputation{ margin-bottom: 30px; }
#top #closeup .column .reputation dt { margin-bottom: 10px; }

#top #closeup .column .reputation div dd{
  border-radius: 100%;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  vertical-align: top;
  margin: 0 5px;
  width: 100px;
  height: 100px;
  display: inline-block;
  background: #fff;
}
#top #closeup .column .reputation div dd span{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;  
}
#top #closeup .column .text{
  font-size: 16px;
  line-height: 1.7;
}

.reputation .circle01 { border: 5px solid #ECD9EC; }
.reputation .circle02 { border: 5px solid #F4EDD2; }
.reputation .circle03 { border: 5px solid #F7FCD1; }
.reputation .circle04 { border: 5px solid #FAF3A7; }
.reputation .circle05 { border: 5px solid #E7F8F4; }
.reputation .circle06 { border: 5px solid #D8F3ED; }
.reputation .circle07 { border: 5px solid #EBFBBF; }
.reputation .circle08 { border: 5px solid #F2C6CB; }
.reputation .circle09 { border: 5px solid #FCF8C5; }
.reputation .circle10 { border: 5px solid #F8D8DB; }
.reputation .circle11 { border: 5px solid #F3E9F3; }
.reputation .circle12 { border: 5px solid #FBCACC; }
.reputation .circle13 { border: 5px solid #F0FAAD; }
.reputation .circle14 { border: 5px solid #DAC9DA; }
.reputation .circle15 { border: 5px solid #E9DCE9; }
.reputation .circle16 { border: 5px solid #ECDFA2; }
.reputation .circle17 { border: 5px solid #DAEDE8; }
.reputation .circle18 { border: 5px solid #E4CBE4; }
.reputation .circle19 { border: 5px solid #FDF2F4; }
.reputation .circle20 { border: 5px solid #E8F782; }
.reputation .circle21 { border: 5px solid #FDE6E7; }
.reputation .circle22 { border: 5px solid #EBF5F2; }
.reputation .circle23 { border: 5px solid #F9F3E1; }
.reputation .circle24 { border: 5px solid #FCDCDE; }
.reputation .circle25 { border: 5px solid #FDFBDD; }


/*faq*/
#top #faq:before{ border-color: #d3f3f8 transparent transparent transparent; }
#top #faq .faq_box{ padding-bottom: 40px; }

#top #faq .faq_box dt{
  font-family: ' メイリオ', Meiryo, " ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  color: #333;
  padding-left: 0;
  background: none;
  text-align: center;
}
#top #faq .faq_box dt:before{
  content: "Q.";
  margin-right: 6px;
}
#top #faq .faq_box dd .ans{
  font-family: ' メイリオ', Meiryo, " ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  color: #1dbee5;
  font-weight: bold;
}
#top #faq .faq_box dd { overflow: hidden; }

#top #faq .faq_box dd:first-of-type div{
  width: 450px;
  float: left;
}
#top #faq .faq_box dd div:nth-of-type(2) {
  padding: 0 10px 0 0;
  width: 430px;
  float: right;
}


/*price*/
#top #price > div{
  display: flex;
  justify-content: space-between;
}
#top #price > div div{ width: 48%; }
#top #price div img{ width: 100%; }
#top #price div p{ margin-bottom: 15px; 
  line-height: 1.8;}


/*event*/
#top #event{ background: url(/img/bg03.gif); }

#top #event p.lead_text{
  width: 83%;
  margin: 0 auto 30px;
}
#top #event .event_list{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 880px;
  margin: 0 auto;
}
#top #event .event_list li{
  width: 160px;
  margin-bottom: 25px;
}
#top #event .event_list li a{
  text-decoration: none;
}
#top #event .event_list img{
  border-radius: 10px;
  width: 100%;
}
#top #event .event_list p{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
}


/*dispatch*/
#top #dispatch{ background: url(/img/bg02.gif); }
#top #dispatch:before{ border-color: #f7f7f7 transparent transparent transparent; }

#top #dispatch h3 span,
#top #dispatch p{ color: #fff; }

#top #dispatch p.lead_text{
  width: 83%;
  margin: 0 auto 30px;
  line-height: 1.8;
}
#top #dispatch .dispatch_list{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 880px;
  margin: 0 auto;
}
#top #dispatch .dispatch_list li{
  width: 135px;
}
#top #dispatch .dispatch_list li img{
  border-radius: 50%;
  width: 100%;
}
#top #dispatch .dispatch_list li p{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.5px;
}


/*option*/
#top #option:before{ border-color: #666 transparent transparent transparent; }

#top #option .option_list{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
#top #option .option_list li{
  width: 31.5%;
}
#top #option .option_list li a{
  text-decoration: none;
}
#top #option .option_list img{
  width: 100%;
  border-radius: 6px;
}
#top #option .option_list p{
  margin-top: 10px;
}


/* f_sitemap */
.f_sitemap {
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin: 0 auto;
  padding: 50px 0 0;
  width: 970px;
}

.f_sitemap dl {
  text-align: left;
  vertical-align: top;
  margin: 0 0 10px;
  padding: 0 15px 20px 15px;
  border-left: dotted 1px #ccc;
  display: inline-block;
}

.f_sitemap dl:first-child { border-left: none; }

.f_sitemap dt {
  font-weight: bold;
  color: #1dbee5;
  padding: 0 0 5px;
}

.f_sitemap dd a {
  color: #666;
  text-decoration: none;
}

.f_sitemap dd a:hover { text-decoration: underline; }

/* movie mainimg */
#mainimg_mov { background: #eaeaea; }

#mainimg_mov #mainimg_text {
  margin: 0 auto;
  margin-left: -550px;
  width: 100%;
  max-height: 458px;
  max-width: 1100px;
  left: 50%;
  position: absolute;
}

#mainimg_mov p, #mainimg_mov a { display: none; }

#mainimg_mov a:hover img {
  opacity: 1;
  filter: alpha(opacity=100);
}

#mainimg_mov .movie_text {
  font-size: 14px;
  padding: 5px 15px;
  z-index: 106;
  top: 0;
  right: 60px;
  position: absolute;
}

#mainimg_mov .movie_text a {
  color: #000;
  text-decoration: none;
  display: block;
}

#mainimg_mov .movie_text_bg {
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  opacity: 0.5;
  z-index: 105;
  top: 0;
  right: 60px;
  background: #fff;
  filter: alpha(opacity=50);
  position: absolute;
}

#mainimg_mov .mainimg_mov_title {
  max-height: 458px;
  max-width: 1100px;
  z-index: 102;
  top: 130px;
  left: 0;
  position: absolute;
}

#mainimg_mov .mainimg_mov_btn01 {
  z-index: 103;
  left: 65px;
  bottom: 21px;
  position: absolute;
}

#mainimg_mov .mainimg_mov_btn02 {
  z-index: 104;
  right: 60px;
  bottom: 18px;
  position: absolute;
}

#mainimg_mov #mainmovie {
  text-align: center;
  max-height: 458px;
  overflow: hidden;
  position: relative;
}

#mainimg_mov #mainmovie iframe { vertical-align: top; }

#mainimg_mov #mainmovie .cover {
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  background: url(../../../img/mesh.png);
  cursor: default;
  position: absolute;
}

#mainimg_mov #mainslide {
  width: 100%;
  max-height: 458px;
  overflow: hidden;
}

#mainimg_mov #mainslide li {
  text-align: center;
  width: 100%;
}

/* widebanner */
#widebanner {
  margin: 0 auto;
  width: 970px;
}

#widebanner ul { width: 100%; }

#widebanner ul:after {
  height: 0;
  display: block;
  clear: both;
  content: " ";
}

#widebanner li {
  padding: 40px 0 0 20px;
  width: 310px;
  float: left;
}

#widebanner li:first-child { padding-left: 0; }

#widebanner li img {
  height: auto;
  max-width: 100%;
}

/* navigator */
#top #navigator {
  box-sizing: border-box;
  letter-spacing: 0;
  margin: 0 auto;
  padding: 20px 0;
  min-height: 440px;
}
#top #navigator:before{
  display: none;
}

#navigator .pic {
  top: 20px;
  left: 10px;
  position: absolute;
}

#navigator .pic ul {
  width: 260px;
  height: 440px;
  overflow: hidden;
  position: relative;
}

#navigator .pic li {
  top: 0;
  position: absolute;
}

#navigator .pic li span {
  width: 260px;
  height: 100px;
  z-index: 2;
  top: 0;
  display: block;
  position: absolute;
}

#navigator .pic li .eye01 { background: url(../../../img/navigator/chara01_eye.png) no-repeat; }
#navigator .pic li .eye02 { background: url(../../../img/navigator/chara02_eye.png) no-repeat; }
#navigator .pic li .eye03 { background: url(../../../img/navigator/chara03_eye.png) no-repeat; }

#navigator .pic span.name {
  z-index: 3;
  top: 327px;
  left: 9px;
  display: block;
  position: absolute;
}

#navigator .bubble {
  border-radius: 30px;
  box-sizing: border-box;
  margin: 0 0 0 300px;
  padding: 0 20px 25px;
  border: solid 1px #ccc;
  width: 670px;
  background: #FFFFFF;
  position: relative;
}

#navigator .bubble .tail {
  padding: 0;
  width: 100px;
  height: 50px;
  top: 100px;
  left: -100px;
  background: url(../../../img/navigator/bubble_tail.png) no-repeat left top;
  content: '';
  position: absolute;
}

#navigator .bubble > div { display: none; }
#navigator .bubble > div.current { display: block; }
#navigator .bubble > div.navigator03 { padding: 5px 0; }

#navigator .bubble p {
  font-size: 16px;
  line-height: 35px;
  padding: 20px 15px 0;
}

#navigator .bubble p strong{
  color: #1dbee5;
}
#navigator .bubble p strong.point_red{
  font-size: 19px;
  color: #ff0000;
}
#navigator .bubble p strong.point_green{
  font-size: 19px;
  color: #66cc00;
}

#navigator .bubble .dismiss {
  text-align: right;
  padding: 20px 20px 0;
}
#navigator .bubble .dismiss a { color: #1dbee5; }

#navigator .btn_area {
  box-sizing: border-box;
  padding: 10px 10px 0;
  width: 100%;
}

#navigator .btn_area:after {
  height: 0;
  display: block;
  clear: both;
  content: " ";
}

#navigator .btn_area li {
  box-sizing: border-box;
  padding: 10px 5px 0;
  width: 50%;
  float: left;
}

#navigator .btn_area a {
  border-radius: 15px;
  font-size: 18px;
  color: #fff;
  line-height: 25px;
  text-decoration: none;
  padding: 20px;
  height: 50px;
  background: #1dbee5;
  display: flex;
  justify-content: center;
  align-items: center;
}

#navigator .btn_area a:hover { background: rgba(29,190,229,0.8); }


#navigator .btn_select {
  border-radius: 25px;
  font-family: ' メイリオ', Meiryo, " ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  font-size: 16px;
  color: #fff;
  line-height: 25px;
  text-align: center;
  text-decoration: none;
  margin: 15px 0 10px;
  padding: 12px 0 10px;
  width: 200px;
  display: inline-block;
  background: #1dbee5;
}

#navigator .btn_select:hover { background: rgba(29,190,229,0.8); }
#navigator .btn_backarea { margin: 0 0 0 10px; }

#navigator .btn_backarea a {
  font-weight: normal;
  margin: 20px 5px 0;
}

#navigator .btn_backarea .btn_select {
  padding: 12px 30px 10px;
  width: auto;
}

#navigator .btn_backarea .btn_back {
  border-radius: 25px;
  font-family: ' メイリオ', Meiryo, " ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  font-size: 16px;
  color: #fff;
  line-height: 25px;
  text-align: center;
  text-decoration: none;
  margin: 20px 5px 10px 40px;
  padding: 12px 25px 10px 60px;
  width: auto;
  display: inline-block;
  background: url(../../../img/navigator/back.png) no-repeat 20px 15px #ccc;
}

#navigator .btn_backarea .btn_back:hover { background: url(../../../img/navigator/back.png) no-repeat 20px 15px #ddd; }

#navigator .teller dl {
  font-size: 16px;
  line-height: 35px;
  padding: 10px 15px 30px;
  position: relative;
}

#navigator .teller dt {
  padding: 10px 0 0;
  position: absolute;
}

#navigator .teller dt img {
  width: 80px;
  height: auto;
}

#navigator .teller dd {
  padding: 0 140px 0 100px;
  position: relative;
}

#navigator .teller p {
  padding: 0;
  top: 0;
  right: 0;
  position: absolute;
}

#navigator .teller a, #navigator .teller span, #navigator .bubble > p > span { color: #3cf; }

#navigator .teller p a {
  border-radius: 20px;
  font-family: ' メイリオ', Meiryo, " ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  box-sizing: border-box;
  font-size: 22px;
  color: #fff;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  padding: 25px 20px 20px;
  width: 120px;
  display: block;
  background: #ff4075;
}

#navigator .teller p a:hover { background: #ff669d; }

#navigator .teller_detail {
  padding: 0 0 20px;
  min-height: 160px;
}

#navigator .teller_detail dl {
  font-size: 14px;
  line-height: 24px;
  padding: 10px 15px 0;
  position: relative;
}

#navigator .teller_detail dt {
  padding: 10px 0 0;
  position: absolute;
}

#navigator .teller_detail dt img { height: auto; }

#navigator .teller_detail dd {
  font-weight: normal;
  padding: 0 0 0 160px;
  position: relative;
}