@charset "utf-8";
/* CSS Document */


body {
        font-family: Avenir , "Open Sans" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

img {width: 100%;
height: 100%;
}


.container {
    padding-top: 50px;
}




.color_container {
max-width: 960px;
margin: auto;
}








/*==================================================
ヘッダー
===================================*/

.logo img {
    max-width: 90px!important;
}



/*==================================================
フッター
===================================*/


footer {
    background: #FFF!important;
    padding: 2rem 0 2rem!important;
}


.footer__copyright {
    margin-bottom: 2rem!important;
}





/*==================================================
イントロ
===================================*/


.intro_image {
    max-width: 380px;
    margin: auto;
}





h1 {
max-width: 720px;
margin: auto;
}



.intro_text p {
width: 100%;
    max-width: 720px;
    margin: 1em auto;
    text-align: justify;
    line-height: 2;
    font-size: 1.2rem;
    font-weight: 600;
}


.underline {
  background: linear-gradient(transparent 70%, #ff99ab 70%);
}

@media (max-width:959px) {
.intro_text {
    width: 80%;
    margin: 10%;
}

.intro_text p {
    text-align: justify;
    line-height: 1.75;
    font-size: 1rem;
    font-weight: 600;
}


}








/*==================================================
カテゴリーへのリンク
===================================*/

.cat-link {
    display: flex;
    flex-wrap: wrap;
    max-width: 720px;
    margin: 0 auto 100px;
}





.btnarrow6 {
    position: relative;
    background: #333;
    padding: 5px 60px 5px 30px;
    margin: 0.5em 0;
    font-size: 1.2rem;
    display: inline-block;
    text-align: center;
    transition: all .2s linear;
    color: #fff!important;
    text-decoration: none;
    border: transparent 2px solid;
    outline: none;
    width: 100%;
}


/*hoverした際のボタンの形状*/
.btnarrow6:hover{
  background:#fff;
  color:#333;
  border-color:#333;
}

/*矢印と線の形状*/

.btnarrow6:before{
  content:"";
    /*絶対配置で線の位置を決める*/
  position: absolute;
  top:50%;
  right:20px;
    /*線の形状*/
  width:20px;
  height:1px;
  background:#fff;
}

.btnarrow6::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 40%;
    right: 12px;
    /*矢印の形状*/
    border: 4px solid transparent;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-color: #fff;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の矢印の形状*/
.btnarrow6:hover::before{
  background:#333;
  right:25px;
}

.btnarrow6:hover::after{
    border-left-color: #333;
    right: 20px;
}



@media (max-width:959px) {

.cat-link {
    display: flex;
    flex-wrap: wrap;
    max-width: 90%;
    margin: 0 auto 80px;
}

}



/*==================================================
PC/SP切り替え
===================================*/

.pc{
display: block;
}

.sp{
display: none;
}


@media (max-width:959px) {

.pc{
display: none;
}

.sp{
display: block;
}


}









/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.thumbnail{
  opacity: 0;
}

/*==================================================
ふわっ
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
















/* グリーン */


.parent_green,.parent_pink,.parent_yellow,.parent_blue, .parent_ivory{
margin-bottom: 20px;
}


.parent_green {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}



.div1 { grid-area: 1 / 1 / 3 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 4; }
.div3 { grid-area: 2 / 3 / 3 / 4; }
.div4 { grid-area: 1 / 4 / 2 / 5; }
.div5 { grid-area: 2 / 4 / 3 / 5; }
.div6 { grid-area: 3 / 1 / 4 / 2; }
.div7 { grid-area: 4 / 1 / 5 / 2; }
.div8 { grid-area: 3 / 2 / 4 / 3; }
.div9 { grid-area: 4 / 2 / 5 / 3; }
.div10 { grid-area: 3 / 3 / 4 / 4; }
.div11 { grid-area: 4 / 3 / 5 / 4; }
.div12 { grid-area: 3 / 4 / 4 / 5; }
.div13 { grid-area: 4 / 4 / 5 / 5; }




/* ピンク */


.parent_pink {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.parent_pink .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent_pink .div2 { grid-area: 2 / 1 / 3 / 2; }
.parent_pink .div3 { grid-area: 1 / 2 / 2 / 3; }
.parent_pink .div4 { grid-area: 2 / 2 / 3 / 3; }
.parent_pink .div5 { grid-area: 1 / 3 / 3 / 5; }
.parent_pink .div6 { grid-area: 3 / 1 / 4 / 2; }
.parent_pink .div7 { grid-area: 4 / 1 / 5 / 2; }
.parent_pink .div8 { grid-area: 3 / 2 / 4 / 3; }
.parent_pink .div9 { grid-area: 4 / 2 / 5 / 3; }
.parent_pink .div10 { grid-area: 3 / 3 / 4 / 4; }
.parent_pink .div11 { grid-area: 4 / 3 / 5 / 4; }
.parent_pink .div12 { grid-area: 3 / 4 / 4 / 5; }
.parent_pink .div13 { grid-area: 4 / 4 / 5 / 5; }

    
    
    
     /* アイボリー */   
 .parent_ivory {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.parent_ivory .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent_ivory .div2 { grid-area: 2 / 1 / 3 / 2; }
.parent_ivory .div3 { grid-area: 1 / 2 / 2 / 3; }
.parent_ivory .div4 { grid-area: 2 / 2 / 3 / 3; }
.parent_ivory .div5 { grid-area: 1 / 3 / 2 / 4; }
.parent_ivory .div6 { grid-area: 2 / 3 / 3 / 4; }
.parent_ivory .div7 { grid-area: 1 / 4 / 2 / 5; }
.parent_ivory .div8 { grid-area: 2 / 4 / 3 / 5; }
.parent_ivory .div9 { grid-area: 3 / 1 / 4 / 2; }
.parent_ivory .div10 { grid-area: 4 / 1 / 5 / 2; }
.parent_ivory .div11 { grid-area: 3 / 2 / 4 / 3; }
.parent_ivory .div12 { grid-area: 4 / 2 / 5 / 3; }
.parent_ivory .div13 { grid-area: 3 / 3 / 4 / 4; }
.parent_ivory .div14 { grid-area: 4 / 3 / 5 / 4; }
.parent_ivory .div15 { grid-area: 3 / 4 / 4 / 5; }
.parent_ivory .div16 { grid-area: 4 / 4 / 5 / 5; }   
    
    
    
 /* イエロー */   
    
 .parent_yellow {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.parent_yellow .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent_yellow .div2 { grid-area: 2 / 1 / 3 / 2; }
.parent_yellow .div3 { grid-area: 1 / 2 / 2 / 3; }
.parent_yellow .div4 { grid-area: 2 / 2 / 3 / 3; }
.parent_yellow .div5 { grid-area: 1 / 3 / 3 / 5; }   
    
    
    

/* ブルー */

.parent_blue {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.parent_blue .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent_blue .div2 { grid-area: 2 / 1 / 3 / 2; }
.parent_blue .div3 { grid-area: 1 / 2 / 2 / 3; }
.parent_blue .div4 { grid-area: 2 / 2 / 3 / 3; }
.parent_blue .div5 { grid-area: 1 / 3 / 2 / 4; }
.parent_blue .div6 { grid-area: 2 / 3 / 3 / 4; }
.parent_blue .div7 { grid-area: 1 / 4 / 2 / 5; }
.parent_blue .div8 { grid-area: 2 / 4 / 3 / 5; }
.parent_blue .div9 { grid-area: 3 / 1 / 5 / 3; }
.parent_blue .div10 { grid-area: 3 / 3 / 4 / 4; }
.parent_blue .div11 { grid-area: 4 / 3 / 5 / 4; }
.parent_blue .div12 { grid-area: 3 / 4 / 4 / 5; }
.parent_blue .div13 { grid-area: 4 / 4 / 5 / 5; }






@media (max-width:959px) {

.parent_green,.parent_pink,.parent_yellow,.parent_blue, .parent_ivory {
margin-bottom: 6px;
grid-column-gap: 6px;
grid-row-gap: 6px;

}




}






/*以下モダール*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}


.remodal dt {
    text-align: left;
    margin: 0.5em;
    font-size: 14px;
}


.remodal dd {
    text-align: left;
    margin: 0.5em;
}


.item-name a {
    text-align: center!important;
    margin: 2em auto;
    display: block;
    border: solid 1px;
    padding: 1em;
}



/*==================================================
ページトップ
===================================*/



/*リンクを右下に固定*/



#page-top a {
    justify-content: center;
    align-items: center;
    background: #7e7e7e;
    border-radius: 60px;
    width: 60px;
    height: 60px;

    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.6rem;
    font-weight: 600;
    transition: all 0.3s;
}



#page-top a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #7e7e7e;
    border-radius: 60px;
    width: 60px;
    height: 60px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.6rem;
    font-weight: 600;
    transition: all 0.3s;
}
#page-top a:hover{
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}



@media (max-width:959px) {



#page-top a {

    background: #ffffff;
    color: #000;

}

}