@charset "utf-8";


/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}
------------------------------------------------------------------------pc



.pc { display: block !important; }
.sp { display: none !important; }
img { width: 100%; }


@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
img { max-width: 100%; }
}

.top{
margin: 0px;
background: #B10132;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
}

.indexbutton{
background: #D37A88;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
}

.buttonc{
background: #D37A88;
text-align: center;
width: 25%;
height: 50px;
outline: 1px solid white;
outline-offset: -1px;
}

.buttonc a{
background: #D37A88;
text-align: center;
width: 100%;
height: 100%;
text-decoration: none;

  -webkit-transition: all 500ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  -moz-transition: all 500ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  -ms-transition: all 500ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  -o-transition: all 500ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  transition: all 500ms cubic-bezier(0.390, 0.500, 0.150, 1.360);

  color: white;
  box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;

}
.buttonc a:hover {
  color: rgba(255, 255, 255, 0.85);
  box-shadow: rgba(30, 22, 54, 0.7) 0 0px 0px 40px inset;
}


.button1{
display: flex; !important;
align-items: center;
justify-content: center;
background: #D37A88;
color: #fff;
font-size: 2rem;
font-weight: bold;
font-family: "Meiryo UI, Yu Gothic" ;
text-align: center;
width: 25%;
height: 100%;
}
.button1s{
display: none !important;
}



@media only screen and (max-width: 750px) {
.buttonc{
background: #D37A88;
text-align: center;
width: 50%;
height: 50px;
}

.button1{
display: none !important;
}
.button1s{
display: flex !important;
align-items: center;
justify-content: center;
background: #D37A88;
color: #fff;
font-size: 1.5rem;
font-weight: bold;
font-family: "Meiryo UI", "Yu Gothic" ;
text-align: center;
width: 50%;
height: 100%;
}
}


.top1{
font-family: "Yu Mincho", "Hiragino Mincho ProN" ;
font-size: 3vw;
font-weight: bold;
padding: 20px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
width: 98%;
height: 100%;
word-break: break-all;
}

@media only screen and (max-width: 750px) {
.top1{
font-family: "Yu Mincho", "Hiragino Mincho ProN" ;
font-size: 4vw;
font-weight: bold;
padding: 20px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
width: 95%;
height: 100%;
line-height:150%;
word-break: break-all;

}
}

.top2{
font-family: "Yu Mincho", "Hiragino Mincho ProN" ;
font-size: 4vw;
font-weight: bold;
padding: 20px 0px;
background: #12B63F;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
}


.outline_white {
color          : #000000; /* 文字の色 */
font-size      : 32pt;  /* 文字のサイズ */
letter-spacing : 6px; /* 文字間 */
text-shadow    : 
 3px  3px 1px #ffffff,
-3px  3px 1px #ffffff,
 3px -3px 1px #ffffff,
-3px -3px 1px #ffffff,
 3px  0px 1px #ffffff,
 0px  3px 1px #ffffff,
-3px  0px 1px #ffffff,
 0px -3px 1px #ffffff; /* 文字の影 */
word-break: break-all;
text-align: justify;
}


.outline2 {
display: inline-block;
font-size: 4vw;
font-weight: 900;
color       : #000;
text-shadow:  2px  2px 10px #ffffce ,
             -2px  2px 10px #ffffce ,
              2px -2px 10px #ffffce ,
             -2px -2px 10px #ffffce;
word-break: break-all;
text-align: justify;

opacity: 1; /* 単位が%でない！ */
animation: fadeIn 5s;
animation-iteration-count: 1;
}



@media only screen and (max-width: 750px) {
.top2{
font-family: "Yu Mincho", "Hiragino Mincho ProN" ;
font-size: 6vw;
font-weight: bold;
padding: 20px 0px;
background: #12B63F;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
}

.outline2 {
display: inline-block;
font-size: 8vw;
font-weight: 900;
color : #000;
text-shadow:  2px  2px 10px #ffffce ,
             -2px  2px 10px #ffffce ,
              2px -2px 10px #ffffce ,
             -2px -2px 10px #ffffce;
word-break: break-all;
text-align: justify;

padding: 15px 0px;

}
}



.top3{
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
width: 100%;
height: 100%;
}

.top3_1{
padding: 20px 0px;
background: #fff;
display: flex;
flex-wrap:nowrap;
align-items: left;
justify-content: left;
text-align: left;
width: 100%;
height: 100%;
}

.red{
padding: 10px 50px;
color: #fff;
font-size: 2.0rem;
font-weight: bold;
font-family: "Meiryo UI", "Yu Gothic" ;
margin: 0px;
background: #B10132;
display: flex;
align-items: center;
justify-content: left;
width:-moz-fit-content; /* Firefox */
width:fit-content; /* other browsers */
border-radius: 0px 20px 20px 0px; /* 左上・右上・右下・左下 */ 
}

.redside{
margin: 0px;
}
.redside img{
width: 50px;
}


.white{
font-size: 4vw;
word-break: break-all;
padding: 15px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
width: 85vw;
height: 100%;
line-height:150%
}



.top4{
padding: 20px 0px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
}

.blue{
padding: 15px;
background: #EAEFF9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 80vw;
border-radius: 20px;
}
.blue img{
width: 50vw;
}

.blue1{
color: red;
font-size: 6vw;
font-weight: bold;
font-family: "Meiryo UI", "Yu Gothic" ;
display: flex;
align-items: left;
justify-content: center;
text-align: left;
width: 80vw;
}

.blue2{
color: #000;
font-size: 4vw;
font-family: "Meiryo UI", "Yu Gothic" ;
display: flex;
align-items: left;
justify-content: center;
text-align: left;
width: 80vw;
line-height:150%
}

.yellow{
padding: 15px;
background: #FFF899;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 80vw;
border-radius: 20px;
}
.yellow img{
width: 50vw;
}

.yellow1{
color: red;
font-size: 6vw;
font-weight: bold;
font-family: "Meiryo UI", "Yu Gothic" ;
display: flex;
align-items: left;
justify-content: center;
text-align: left;
width: 80vw;
}

.yellow2{
color: #000;
font-size: 4vw;
font-family: "Meiryo UI", "Yu Gothic" ;
display: flex;
align-items: left;
justify-content: center;
text-align: left;
width: 80vw;
line-height:150%
}

.wisteria{
padding: 15px;
background: #FBE6EF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 80vw;
border-radius: 20px;
}

.wisteria1{
color: red;
font-size: 6vw;
font-weight: bold;
font-family: "Meiryo UI", "Yu Gothic" ;
display: flex;
align-items: left;
justify-content: center;
text-align: left;
width: 80vw;
}

.wisteria2{
color: #000;
font-size: 4vw;
font-family: "Meiryo UI", "Yu Gothic" ;
display: flex;
align-items: left;
justify-content: center;
text-align: left;
width: 80vw;
line-height:150%
}

.gray{
padding: 15px;
color: red;
font-size: 6vw;
font-weight: bold;
font-family: "Meiryo UI", "Yu Gothic" ;
display: flex;
align-items: left;
justify-content: center;
text-align: left;
width: 80vw;
background: #E1E1E1;
border-radius: 20px;
}
.gray a{
color: red;
text-align: center;
width: 100%;
height: 100%;
text-decoration: none;
}
.gray a:hover {
color: blue;
background: #E1E1E1;
}




.top5{
padding: 20px 0px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
}

.pink{

padding: 15px;
background: #FCE4E2 url(clover_white.png) no-repeat right bottom;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
width: 80vw;
border-radius: 0px 0px 20px 20px;

font-size: 3vw;
word-break: break-all;
line-height:150%

}

.ph{
padding: 15px;
background: #FDE8D0 url(clover_white_name.png) no-repeat left bottom;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 80vw;
border-radius: 20px 20px 0px 0px;

font-size: 3vw;

}
.ph img{
width: 20vw;
}






.top6{
padding: 20px 0px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
width: 100%;
height: 100%;
}


.recent_update{
display: flex;
flex-direction: column;

justify-content: center;
text-align: left;

margin: 15px 0px 0px 0px;
padding: 15px;
background: #FCE4E2;
width: 80vw;
border-radius: 20px 20px 0px 0px;

font-size: 2.5rem;
font-weight: bold;
font-family: "Meiryo UI", "Yu Gothic" ;

}

.recent_update_contents{
display: flex;
flex-direction: column;

justify-content: center;
text-align: left;


padding: 15px;
background: #FCE4E2;
width: 80vw;
border-radius: 0px 0px 20px 20px;

font-size: 1.5rem;
font-family: "Meiryo UI", "Yu Gothic" ;

}

.top7{
padding: 20px;
background: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
width: 80%;
height: 100%;
}

.link{
padding: 10px 0px;
width: 80%;
height: 100%;
}

.link_mini{
padding: 10px 0px;
width: 50%;
height: 100%;
}










/* Outline Out */
.highlight_hvr-outline-out {
  font-size: 35px;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #FCE4E2;
  color: white;

}
.highlight_hvr-outline-out:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.highlight_hvr-outline-out:hover:before, .highlight_hvr-outline-out:focus:before, .highlight_hvr-outline-out:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}




.clover_bottom{
display: flex;
flex-direction: column;
padding: 0px;
background: #fff url(clover_bottom.png) no-repeat right bottom;
width: 100%;
height: 70px;
margin: 0;

}






.wrapper{
	min-height: 100vh;
	position: relative;/*←相対位置*/
	padding-bottom: 120px;/*←footerの高さ*/
	box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

#footer {
	background: #B10132;
	margin: 30px 0 0 0;
	color: #FFFFFF;
	text-align: center;
	position: absolute;/*←絶対位置*/
	width: 100%;
}

#footerContents {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}
#footerContentsBox {
	width: 100%;
}
#footerContentsBox .left {
padding: 15px;

	float: left;
	width: 100%;
}
#footerContentsBox .right {
	float: right;
	width: 120px;
	text-align: right;
}
.copyright {
	text-align: center;
	padding: 10px 0;
}
.footLink {
	text-align: center;

}
.footLink a {
	color: #FFFFFF;
	text-decoration: none;
}
.footLink a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}


/* clearFix */

.c-r {
	clear: right;
}
.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }