@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family:"fot-seurat-pron", sans-serif;
    line-height: 1.8;
    color: #432;
    font-style: normal;
    font-weight: 600;
    font-size:16px;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
.wrapper {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 4%;
}
.wrapper5 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
}
/*ページガイド*/
.menu-content p {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 0.9rem;
    margin: 10px 0  0px;
}
.menu-content a:hover {
    color: #0bd;
}
.world-content1 p {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 0.9rem;
    padding-left:75px;
}
.world-content1 a:hover {
    color: #0bd;
}
.mirai-content p {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 0.9rem;
    margin: 10px 0  0px;
    color:#999999;
}
.mirai-content a:hover {
    color: #0bd;
}


/* 大きな背景画像 */
.big-bg {
    background-size: cover;
    background-position: relative;
    background-repeat: no-repeat;
}
.big-bg2 {
    background-size: auto;
    background-position: center top;
    background-repeat: repeat;
}

/* 見出し */
.page-title {
    font-size: 5rem;
    font-family: "fot-seurat-pron", sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}
.sub-title {
    font-size: 1.375rem;
    padding: 0 8px 8px;
    border-bottom: 2px #0bd solid;
    font-weight: normal;
}


/* HEADER
------------------------------- */
.page-header {
    display: flex;
    justify-content:space-between;
}
.logo {
    width: 240px;
    margin-top: 40px;
}
.logo2 {
    width: 260px;
    margin-top: 35px;
}
.logo3 {
    width: 160px;
    margin-top: 10px;
}


*, *:before, *:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}

/* menu */
.cp_offcm03 {
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 100%;
	margin-top: 30px;
}
.cp_offcm03 ul {
	margin: 0;
	padding: 0;
}
.cp_offcm03  ul li {
    list-style:none;
    display: inline-block;
    width: 210px;
    text-align: center;
    background-color: #FF6699;
    border-radius: 5px;
    float: left;
    height: 50px;
    line-height: 50px;
    margin: 3px;
}
.cp_offcm03  a {
	font-size:14px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    display :block;
}
.cp_offcm03  a:hover {
	background-color:#FFCCCC;
    border-radius: 5px;
}
.cp_offcm03 img{
    vertical-align: middle;
    padding-right:10px;
    width: 20%
}

/* HOME
------------------------------- */
#home {
    background-image:url(images/newhaikei1.png)
}

.slider{
    margin: auto 325px;
}
.slider img{
    width: 100%;
}

.hp-map{
    width:100%;
    text-align:center;
}




@media (max-width: 767px) {
.logo {
    width: 250px;
    margin-top: 65px;
}
.top-contents {
    width: 100%;
    height:300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
}




/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}


/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}


@media (max-width: 767px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: auto;
padding-top: 35px;
color: #ffffff;
z-index: 1000;
}
.cp_offcm03  ul li {
    margin: 0px;
}
.cp_offcm03 nav {
background: #FF99CC;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
border-bottom: 1px solid #ffffff;
}
.cp_offcm03 a {
	font-size:0.7rem;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    display :block;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 60px;
background-color: #FF6699;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
margin:0px;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: #eeeeee;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: #eeeeee;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}

/*ラベルの画像*/
.drawer{
 display: flex;
 flex-direction: row;
 align-items: flex-end;
 justify-content: flex-end;
 position: relative;
 height: 5px;
}
#hedpic{
  max-width:35%;
  display:block;
  padding-left:55px;
  
}


.drawer1{
 display: flex;
 flex-direction: row;
 align-items: flex-end;
 justify-content: center;
 position: relative;
 height: 1px;
}
#hedpic1{
  max-width:35%;
  display:block;
}





/* content */
.cp_container {
top: 60px;
height: 92vh;
}
}
input[type="checkbox"]{
  display:none;
}


        



/* NEWS
------------------------------- */
#newstop {
    background-image:url(images/newhaikei2.png);
    background-size:contain;
    }
.news-title{
    font-family:"Yu Mincho", "YuMincho", serif;
    font-size: 3rem;
    font-weight: bolder;
    margin-left:180px;
}
.news-contents {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* 記事部分 */
article {
    width: 65%;
    order: 1;
}
.post-info {
    position: relative;
    padding-top: 2px;
    margin-bottom: 10px;
}
.post-date {
    background:  #FF6699;
    border-radius: 50%;
    color: #fff;
    width: 100px;
    height: 100px;
    font-size: 1.625rem;
    text-align: center;
    position: absolute;
    top: 0;
    padding-top: 10px;
}
.post-date span {
    font-size: 1rem;
    border-top: 1px rgba(255,255,255,.5) solid;
    padding-top: 6px;
    display: block;
    width: 60%;
    margin: 0 auto;
}
.post-title {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 2rem;
    font-weight: normal;
}
.post-title,
.post-cat {
    margin-left: 120px;
}
.post-comment {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 1.5rem;
    font-weight: bolder;
}
article  {
    margin-bottom: 20px;
}
article p {
    margin-bottom: 1rem;
}

.cp_hr02 {
	border-width: 3px 0 0 0;
	width: 865px;
	border-style: solid;
	border-color: #FFC7AF;
	padding:10px;
}
/* ボタン */
.button1 {
    font-size: 1.2rem;
    font-weight: bolder;
    padding: 0.8rem 2rem;
    color: #fff;
    border-radius: 100vh;
    background-image: -webkit-gradient(linear, right top, left top, from(#A4C6FF), to(#CC33FF));
    background-image: -webkit-linear-gradient(right, #A4C6FF 0%, #CC33FF 100%);
    background-image: linear-gradient(to left, #A4C6FF 0%, #CC33FF 100%);
}
.button1:hover {
    background: #CC66CC;
}

.button-area {
  text-align: center;
  margin:60px;
}

/* サイドバー */
aside {
    width: 27%;
    order: 2;
}
.sub-menu {
    margin-bottom: 60px;
    list-style: none;
}
.sub-menu li {
    border-bottom: 1px #ddd solid;
}
.sub-menu a {
    color: #432;
    padding: 10px;
    display: block;
}
.sub-menu a:hover {
    color: #0bd;
}
aside p {
    padding: 12px 10px;
}
aside img{
    vertical-align: middle;
    padding-right:10px;
    width: 20%
}




/* キャラクター
------------------------------- */
#nakama h1 {
  color: #fff;
  border-radius: 50px;
  background-image: -webkit-gradient(linear, left top, right top, from(#FF3366), to(#FFCCCC));
  background-image: -webkit-linear-gradient(left, #FF3366 0%, #FFCCCC 100%);
  background-image: linear-gradient(to right, #FF3366 0%, #FFCCCC 100%);
  font-family:"fot-seurat-pron", sans-serif;
  font-size:40px;
  font-weight:900;
  padding-left:40px;
}
.grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    margin-top: 6%;
    margin-bottom: 50px;
    text-align: center;
    font-weight: bolder;
}
.item p {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 1rem;
    margin: 10px 0  0px;
}
.name {
    font-weight: normal;
    margin: 1px 0  0px;
}



/* プロフィール
------------------------------- */
#profile img{
    width:70%;
    padding-left:475px;
}


@media screen and (max-width: 768px) {
#profile img{
    width:100%;
    padding-left:0px;
}
}




/* author
------------------------------- */
#author {
    background-image:url(images/newhaikei2.png);
    background-size:contain;
    }
#message img{
    width: 1000px;
    margin-left:200px;
    height: 500px;
    box-shadow: 0 0 8px gray;
}
.author-content p{
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 16px;
    font-weight: normal;
}

.author-subcontent p{
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 16px;
    font-weight: normal;
}
.author-content .content-subtitle {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 16px;
    font-weight: normal;
}

.author-content img {
     padding:50px;
     width: 250px;
     justify-content: space-between;
}


.author-subcontent img {
    width: 1500px;
    hight: auto;
}

#hirase img{
    width: 75%;
    padding-left:240px;
}

#takafumi img{
    width: 25%;
}


/*経歴*/
.accbox3 label {
    display: block;
    margin: 1.5px 0;
    padding: 5px;
    font-weight: bold;
    font-size:20px;
    cursor :pointer;
    transition: all 0.5s;
    border-radius: 10px;
    border: 5px solid #fff;
    background :#FFCCCC;
}

/*アイコンを表示*/
.accbox3 label:before {
    content: '\f107';
    font-family: "Font Awesome 5 Free";
    padding:20px;
}


/*チェックは隠す*/
.accbox3 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox3 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    opacity: 1;
}

.accbox3 .accshow p {
    margin: 15px 10px}
    
.div-pre {
    white-space: pre;
    font-size:13px;
}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f106';
}

 /* author */
@media screen and (max-width: 768px) {
.author-content .page-title{
    font-size: 1.2rem;
    font-weight: normal;
}
.author-content p {
    font-size: 0.9rem;
    margin: 10px 0  0px;
}
.author-content img {
     padding:5px;
     margin-left:80px;
     width: 150px;
}
#message img{
    width: 100%;
    height: auto;
    margin-left:0px;
    }
#hirase img{
    width: 100%;
    height: auto;
    padding-left:0px;
    }
.wrapper5 {
    max-width: 400px;
    margin: 0 auto;
    padding: 0 4%;
}
.div-pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}
#takafumi img{
    width: 25%;
    margin-left:8px;
    
}
}





/* world
------------------------------- */
#awabeto {
    background-color:#ff9dbd;
}
.world-content1{
    background-size: cover;
    background-color:#ff9dbd;
}

.world-content2 img{
    width: 1200px;
    padding-left:300px;
    height: 530px;
}

/*ボックス全体*/
.accbox1 {
    margin: 0 auto;
    padding: 0.4%;
    max-width: 1500px;/*最大幅*/
}


/*ラベル*/
.accbox1 label img  {
    width:55%;
}

/*チェックは隠す*/
.accbox1 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox1 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    opacity: 1;
}

.accbox1 .accshow p {
    margin: 15px 10px}
    

/*アイコンを表示*/
.accbox1 label:before {
    content: '\f107';
    font-family: "Font Awesome 5 Free";
    padding:30px;
    color:#ff9dbd;
}


/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f106';
}





@media screen and (max-width: 768px) {
.accbox1 label img  {
    width:100%;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}
/*アイコンを表示*/
.accbox1 label:before {
    display:none;
}
}


#seimei img{
    width: 80%;
    height: auto;
    padding-left:300px;
    padding-bottom:50px;
}
/* ボタン */
.button2 {
  font-size:24px;
  position: relative;
  display: inline-block;
  padding: 1rem 2rem 1rem 4rem;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #ff6699;
}

.button2:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}


#space img{
    vertical-align: bottom;
    width: 1200px;
    padding-left:280px;
    height: auto;
}


#zukan img{
    width: 80%;
    height: auto;
    padding-left:180px;
    padding-bottom:50px;
}


.monoshiri-contents {
    display: flex;
    margin-bottom: 10px;
}
article1 img {
    width: 700px;
    height: auto;
    vertical-align: bottom;
}





/* サイドバー */
aside1 {
    width: 180%;
    order: 2;
}
.monoshiri-menu {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 1.2rem;
    margin-bottom: 10px;
    margin-left:40px;
    border-bottom: 3px #ddd solid;
}
.sub-monoshiri li {
    border-bottom: 1px #ddd solid;
    margin-left:40px;
    list-style: none;
}
.sub-monoshiri a {
    color: #432;
    padding: 10px;
    display: block;
}
.sub-monoshiri a:hover {
    color: #0bd;
}
aside1 p {
    padding: 20px 20px;
}
aside1 img{
    vertical-align: middle;
    padding-right:10px;
    width: 20%
}

#cha3 img{
    width: 90%;
    height: auto;
    padding-left:180px;
    padding-bottom:50px;
}



#history{
    background-image:url(images/history-g.png);
    width:100%;
    height:auto;
}


.cp_timeline02 {
position: relative;
margin: 3em auto;
overflow: auto;
}
.cp_timeline02:before {
position: absolute;
left: 50%;
width: 5px;
height: 100%;
content: '';
background: #EF6C00;
}
.cp_timeline02 h2 {
position: relative;
clear: both;
max-width: 6em;
margin: 0 auto 1em;
padding: .1em;
text-align: center;
background: #FFC107;
border-radius: 8px;
font-size: 1.2em;
}
.cp_timeline02 ul {
max-width: calc(100% - 4em);
margin: 0;
padding: 0 0 0 2em;
list-style: none;
}
.cp_timeline02 li {
position: relative;
margin-bottom: 1em;
padding: 1em;
background: #FFF8E1;
width: 42%;
border-radius: 8px;
border: solid 1px rgba(255,202,40 ,1);
}
.cp_timeline02 li:before {
position: absolute;
top: 12px;
left: -14px;
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFF8E1 transparent transparent;
z-index: 0;
}
.cp_timeline02 li:after {
position: absolute;
top: 12px;
left: -16px;
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFCA28 transparent transparent;
z-index: -1;
}
.cp_timeline02 li:nth-child(even) {
float: right;
margin-top: 2em;
}
.cp_timeline02 li:nth-child(odd) {
float: left;
}
.cp_timeline02 li:nth-child(odd):before {
right: -14px;
left: auto;
border-width: 10px 0 10px 15px;
border-color: transparent transparent transparent #FFF8E1;
}
.cp_timeline02 li:nth-child(odd):after {
position: absolute;
right: -16px;
left: auto;
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 15px;
border-color: transparent transparent transparent #FFCA28;
z-index: -1;
}
.cp_timeline02 li:nth-of-type(2n+1) {
clear: both;
}
.cp_timeline02 li .flag {
padding: 0;
margin: 0;
font-weight: bold;
}
.cp_timeline02 li .desc {
font-size: 0.7em;
line-height: 1.5em;
}
.cp_timeline02 li .time {
font-size: 0.6em;
color: #00838F;
font-weight: bold;
}
@media only screen and (max-width: 767px) {
.cp_timeline02:before {
left: 0;
}
.cp_timeline02 ul {
z-index: 1;
padding: 0 0 0 1.5em;
}
.cp_timeline02 li {
width: 100%;
}
.cp_timeline02 li:nth-child(even),
.cp_timeline02 li:nth-child(odd) {
float: none;
}
.cp_timeline02 li:nth-child(odd):before {
right: auto;
left: -14px;
border-width: 10px 15px 10px 0;
border-color: transparent #FFF8E1 transparent transparent;
}
.cp_timeline02 li:nth-child(odd)::after {
right: auto;
left: -16px;
border-width: 10px 15px 10px 0;
border-color: transparent #FFCA28 transparent transparent;
}
}

#manmaru img{
    width: 80%;
    height: auto;
    padding-left:180px;
    padding-bottom:50px;
}





/* answer
------------------------------- */
#answer1 {
    background-image:url(images/answer_back.png);
    min-height: 85vh;
}

#answer img{
    width: 1200px;
    padding-left:300px;
    height: 510px;
}
    
/*ボックス全体*/
.accbox {
    margin: 0 auto;
    padding: 0.4%;
    max-width: 1200px;/*最大幅*/
}


/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding: 5px;
    color :#FF6699;
    font-weight: bold;
    font-size:40px;
    background :#dff9f2;
    cursor :pointer;
    transition: all 0.5s;
    border-radius: 10px;
    height: 100px;
    line-height:80px;
    margin: 10px;
    border: 5px solid #fff;
}
.accbox label img{
    vertical-align: middle;
    padding-right:10px;
    width: 5%;
}


/*アイコンを表示*/
.accbox label:before {
    content: '\f107';
    font-family: "Font Awesome 5 Free";
    padding:30px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f106';
}

@media screen and (max-width: 768px) {
/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#FF6699;
    font-weight: bold;
    font-size:16px;
    background :#dff9f2;
    cursor :pointer;
    transition: all 0.5s;
    border-radius: 10px;
    padding:7px;
    height: 70px;
    line-height:50px;
    margin: 7px;
    border: 4px solid #fff;
}
.accbox label img{
    vertical-align: middle;
    padding-right:10px;
    width: 10%;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}
}


/* SOON*/
#soon img{
    width: 1200px;
    padding-left:300px;
    height: 530px;
}
#soonback {
    background-color:#ff9dbd;
}

/* mirai*/
#mirai img{
    width: 1200px;
    padding-left:300px;
    height: 530px;
}
#miraiback {
    background-color:#191919;
}
/* content */
.cp_container {
	position: relative;
	top: 0;
	padding: 35px auto;
	-webkit-transition: transform .3s ease-in;
	        transition: transform .3s ease-in;
}

.mirai_content {
	margin: 0 auto;
	padding-top:15px;
	height: 45vh;
	text-align: center;
	font-size: 3rem;
    font-family: 'Source Serif Pro', serif;
    text-transform: uppercase;
    font-weight: normal;
    color: #999999;
}
.mirai_content h1{
line-height:2;
letter-spacing: 10px;
}

.fade-in01{ 
  font-size:35px;
  opacity:0;
  animation-name: sample01; 
  animation-duration: 5s; 
  animation-fill-mode: forwards; 
}

@keyframes sample01 {
0% {
  opacity: 0;
  color:#000;
}
 100% {
  opacity: 1;
  color: #999999;
} 
}
@media screen and (max-width: 768px) {
.cp_container {
    height:60vh;
}
.mirai_content {
	height: 26vh;
}
.fade-in01{ 
  font-size:20px;
}
}









/* topに戻る*/
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #800000;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #800000;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0;
  text-align: center;
  color: #800000;
}

/* present
------------------------------- */
#present-title h1 {
  position: relative;
  padding: 1rem .5rem;
}

#present-title h1:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}
#present-title p {
    font-size: 20px;
}

#tag-title h2 {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem 1rem 4rem;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #ff6699;
}

#tag-title h2:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}

.presentlist {
    margin:20 30px;
}
.present-contents{
    overflow:hidden;
    margin: 5;
    padding:5;
    list-style:none;
}
.present-contents li{
    float:left;
    margin:0 5% 20px 0;
    border:3px solid #dadada;
    width:30%;
    border-radius:10px;
}

.present-contents p{
    font-size:18px;
    text-align:center;
}

.present-contents li:last-child{
    margin:0 0 0 0;
}

#downloadButton {
	text-align: center;
    padding-bottom: 20px;
}
#downloadButton a {
	display: inline-block;
	padding: 12px 20px;
	background-color: #ff5b6b;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	border: 1px solid #ff5b6b;
	border-radius:10px;
}
#downloadButton a:hover {
	background-color: #ffffff;
	color: #ff5b6b;
}

@media screen and (max-width: 768px) {
    
#present-title p  {
font-size: 16px;
}
    
.present-contents li{
    float:left;
    margin:0 5% 20px 0;
    border:3px solid #dadada;
    width:100%;
    border-radius:10px;
}
#tag-title h2 {
  padding: 1rem 1rem 1rem 2rem;
}
}



/* arau
------------------------------- */

#arautop {
    background-color:#ff9dbd;
}

#araumenu img  {
    width:100%;
}
.arau-content img{
    width: 80%;
    padding-left:310px;
    height: 690px;
}

@media screen and (max-width: 768px) {
.arau-content img{
    width: 100%;
    padding-left:0px;
    height: 100%;
}
}
/* shampoo
------------------------------- */
#shampoo {
    background-image:url(images/qa-back1.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:3988px;
}
#shampoo2 {
    background-image:url(images/qa-back2.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:5925px;
}
#shampoo3 {
    background-image:url(images/qa-back3.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:5920px;
}
#shampoo4 {
    background-image:url(images/qa-back4.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:3350px;
}
#shampoo5 {
    background-image:url(images/qa-back5.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:5923px;
}
#shampoo6 {
    background-image:url(images/qa-back6.png);
   background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:5800px;
}
#shampoo7 {
    background-image:url(images/qa-back7.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:3900px;
}
#shampoo8 {
    background-image:url(images/qa-back8.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:3900px;
}


#arau img{
    width:70%;
    padding-top:1730px;
    padding-left:440px;
}
#arau2 img{
    width:70%;
    padding-top:100px;
    padding-left:440px;
}

#arau3 img{
    width:70%;
    padding-top:100px;
    padding-left:440px;
}
#go img{
    width:60%;
    height:100%;
    padding-top:2615px;
    padding-left:145px;
}
#nogo img{
    width:90%;
    padding-left:590px;
}

#next img{
    width:58%;
    padding-top:4880px;
    padding-left:280px;
}
#plus img{
    width:80%;
    padding-left:610px;
}


@media screen and (max-width: 768px) {
#shampoo {
    background-size:100%;
    height:1640px;
}
#shampoo2 {
    background-size:100%;
    height:2438px;
}
#shampoo3 {
    background-size:100%;
    height:2437px;
}
#shampoo4 {
    background-size:100%;
    height:1323px;
}
#shampoo5 {
    background-size:100%;
    height:2430px;
}
#shampoo6 {
    background-size:100%;
    height:2430px;
}
#shampoo7 {
    background-size:100%;
    height:1000px;
}
#shampoo8 {
    background-size:100%;
    height:750px;
}

#arau img{
    width:80%;
    padding-top:700px;
    padding-left:40px;
}
#arau2 img{
    width:80%;
    padding-top:50px;
    padding-left:40px;
}

#arau3 img{
    width:85%;
    padding-top:60px;
    padding-left:40px;
}



#go img{
    width:60%;
    height:100%;
    padding-top:641.7px;
    padding-left:34.5px;
}
#nogo img{
    width:89%;
    padding-left:154px;
}
#next img{
    width:70%;
    padding-top:2030px;
    padding-left:0px;

}
#plus img{
    width:100%;
    padding-top:20px;
    padding-left:142px;
}
}

/* start
------------------------------- */
#earth {
    background-image:url(images/earth1.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:9110px;
}
#earth2 {
    background-image:url(images/earth2.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:7400px;
}

* {
  box-sizing: border-box;
  }

/* ポップアップウインドウの設定 */
.popup {
  background-color: #efefef;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 70vw;
  height: 50vw;
  overflow-y: scroll;
}
/* チェックボックスの初期設定 */
#popup-on{
  display: none;
}
/* チェックされたらポップアップウインドウを開く */
#popup-on:checked + .popup{
  display: block;
}

/* 閉じるアイコン（右上） */
.icon-close{
  background: #000;
  color: #fff;
  font-size: 20px;
  padding: 0 10px;
  position: absolute;
  right: 0;
}

/* 開くボタン */
.btn-open{
  padding-top: 2241px;
  padding-left:894px;
  cursor: pointer;
  width: 81%;
}

/* ポップアップの内容 */
.popup-content{
  margin: 40px auto 40px auto;
  width: 100%;
}




@media screen and (max-width: 768px) {
#space{
    display:block;
    margin:15px;
}
#earth {
    background-size:100%;
    height:3720px;
}
#earth2 {
    background-size:100%;
    height:3008px;
}
.btn-open{
  padding-top: 905px;
  padding-left:245px;
  cursor: pointer;
  width: 100%;
}
.popup {
  width: 100vw;
  height: 100vw;
}
}

/* why
------------------------------- */
#why {
    background-image:url(images/why1.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:7860px;
}
#why1 {
    background-image:url(images/why2.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:10850px;
}


@media screen and (max-width: 768px) {
#why {
    background-size:100%;
    height:3235px;
}
#why1 {
    background-size:100%;
    height:4460px;
}
}

/* bank
------------------------------- */
#bank {
    background-image:url(images/bank1.png);
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:9100px;
}


@media screen and (max-width: 768px) {
#bank {
    background-size:100%;
    height:3820px;
}
}





/* wow
------------------------------- */
#awa1 {
    background-image:url(images/awa1.png);
    background-size:100%;
    height:7691px;
}
#awa2 {
    background-image:url(images/awa2.png);
    background-size:100%;
    height:9872px;
}

@media screen and (max-width: 768px) {
#awa1 {
    height:1899px;
}
#awa2 {
    height:2438px;
}
}

/* CONTACT
------------------------------- */
#contact {
    background-image: url(images/haikei.png);
    min-height: 100vh;
}

/* フォーム*/
from div {
    margin-bottom: 14px;
}
label {
    font-size: 1.125rem;
    margin-bottom:10px;
    display: block;
}
textarea{
    width: 100%;
    max-width:480px;
    height:6rem;
}


/* 店舗情報・地図*/


<style type="text/css">
/* 自由に編集下さい */
#formWrap {
	width:500px;
	margin:0 auto;
	color:#555;
	line-height:150%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:20%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
p.error_messe{
	margin:5px 0;
	color:red;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	font-family:"fot-seurat-pron", sans-serif;
	width:100px;
}
#location {
    padding: 4% 0;
}
#location .wrapper{
    display: flex;
    justify-content: space-between;
}
.location-info{
    width: 50%;
}
.location-info p{
    padding: 12px 10px;
}
.location-map{
    width: 100%;
}

/* i frame */
i frame{
    width:100%;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#contact {
    background-size:contain;
}
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:70%;
	height:50px;
	font-family:"fot-seurat-pron", sans-serif;
}
 .location-map{
    width: 1%;
}
}
</style>






/* SNS*/
#sns {
    background: #FF6699;
    padding: 2% 0;
}
#sns .wrapper{
    display: flex;
    justify-content: space-between;
}
#sns .sub-title{
    margin-bottom: 30px;
}
.sns-box{
    width: 25%;
}


/* フッター
------------------------------- */
footer {
    background: #FF6699;
    text-align: center;
    padding: 26px 0;
}
footer p {
    color: #fff;
    font-size: 0.875rem;
}



/* モバイル版
------------------------------- */
@media screen and (max-width: 768px) {
.page-title {
        font-size: 1rem;
}
.page-header {
        flex-direction: column;
        align-items: center;
}
.logo {
    width: 200px;
}
.logo2 {
display: none;
}
.logo3 {
display: none;
}
.slider{
    margin: 0px;
}
.slider img{
    width: 100%;
}




    /* NEWS */
    #newstop {
    background-size:contain;
    }
    .news-contents {
        flex-direction: column;
    }
    .news-title {
        font-size: 2.5rem;
        font-weight: bolder;
        margin-left:30px;
    }
    article,
    aside {
        width: 100%;
    }
    aside {
        margin-top: 60px;
    }
    
    .sub-menu{
        font-size: 0.875rem;
    }
    
    .post-info {
        margin-bottom: 30px;
    }
    .post-date {
        width: 70px;
        height: 70px;
        font-size: 1rem;
    }
    .post-date span {
        font-size: 0.875rem;
        padding-top: 2px;
    }
    .post-title {
        font-size: 1.375rem;
    }
    .post-comment{
        font-size:0.9rem;
    }
    .post-cat {
        font-size: 0.875rem;
        margin-top: 10px;
    }
    .post-title,
    .post-cat {
        margin-left: 80px;
    }
    .cp_hr02 {
	border-width: 5px 0 0 0;
	width: 100%;
	padding-top:30px;
	border-style: solid;
	border-color: #FFC7AF;
    }
    
    /* MENU */
   #nakama h1 {
    font-size:20px;
    font-weight:400;
    padding-left:15px;
    }
   .menu-content {
       padding-top:50px;
   }
   .menu-content p {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 0.8rem;
   }
   .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 6%;
    margin-bottom: 50px;
    text-align: center;
    font-weight: bolder;
    }
   .item p {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 0.65rem;
    margin: 10px 0  0px;
    }
    .name {
    font-weight: normal;
    font-size: 0.1rem;
    margin: 1px 0  0px;
}

   /* world */
   .world-content2 img{
    width: 100%;
    padding:5px;
    height: auto;
}
    .world-content1 p {
    padding-top:60px;
    padding-left:0px;
    font-size: 0.8rem;
    }
    #seimei img{
    width: 100%;
    height: auto;
    padding-left:0px;
    padding-bottom:5px;
    }
    .button2 {
    font-size: 20px;
    }
    
    #space img{
    width: 100%;
    height: auto;
    padding-left:0px;
    }
    #space2 img{
    width: 100%;
    padding-left:0px;
    padding-top:5px;
    height: auto;
}
   
    #zukan img{
    width: 100%;
    height: auto;
    padding-left:0px;
    padding-bottom:5px;
    }
    
    #cha3 img{
    width: 200%;
    height: auto;
    padding-left:0px;
    padding-bottom:5px;
    }
    #manmaru img{
    width: 100%;
    height: auto;
    padding-left:0px;
    padding-bottom:5px;
    }
    /* サイドバー */
    
    .monoshiri-contents {
    display: block;
}
    article1 {
    width: 100%;
    height: auto;
}
    aside1 {
        width: 100%;
    }
    .monoshiri-menu{
        font-size: 1rem;
        margin-left:0px;
    }
    .sub-monoshiri li {
        font-size: 0.9rem;
        margin-left:0px;
    }
    
   
   
  
    
    
    

/* SOON*/
#soon img{
    width: 100%;
    padding:5px;
    height: auto;
}


#soonback {
    height: 700px;
}

#mirai img{
    width: 100%;
    padding:5px;
    height: auto;
}


#miraiback {
    height: 700px;
}

.mirai-content {
       padding-top:50px;
   }
   .mirai-content p {
    font-family:"fot-seurat-pron", sans-serif;
    font-size: 0.8rem;
   }


#answer1 {
background-size:contain;
}

#answer img{
    width: 100%;
    padding:5px;
    height: auto;
}



 /* 店舗情報・地図/ SNS*/
   #location .wrapper,
   #sns.wrapper {
    flex-direction: column;
   }
   .location-map{
    width: 10%;
}
   .location-info,
  .sns-box{
     width: 100%;
  }
  
  .sns-box{
     margin-bottom: 30px;
  }
}





/* 全体のスタイル */
.swiper-wrapper {
	width: 100%;
	height: 250px;
}
/* 全スライド共通スタイル */
.swiper-slide {
	color: #435;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
.swiper-slide:nth-child(4n+1) {
    background-image: url(images/chara-20.png);
}
/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
	background-image: url(images/chara-30.png)
}
/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
	background-image: url(images/chara-41.png)
}
/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
	background-image: url(images/chara-44.png)
}