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




html {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}

body {
  /*  フォントの種類  */
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック",
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  
  /*  フォントのサイズ  */
  font-size: 1.6rem;
  
  /*  フォントの色  */
  color: #333;
  
  /* 文字間隔の調整の設定 */
  letter-spacing: 1.5px;
  
  /* 行間の設定 */
  line-height: 1.75;
  
   /* プロポーショナルメトリクスを有効にする指定 */
  font-feature-settings: "palt" 1;
}

img {
width: 100%;
}

h1 {

    max-width: 700px;
}

h2 {

    font-weight: 600;
}



h3 {
width: 20%;
    max-width: 400px;
}



h5 {
    font-size: 1.1rem;
}

article {
    padding-right: 50px;
}
    
 .button03 a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2% auto 2%;
    padding: 1em 2em;
    width: 30%;
    color: #000;
    font-size: 1.6rem;
    font-weight: 500;
    border: 2px solid #000;
}
    
.button03 a::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: rotate(45deg);
}    
/*========= ヘッダーナビゲーションのためのCSS ===============*/

/*==ヘッダーの形状*/
#header {
    position: fixed;
    top: 0;
    right: 0;
    width: 50px;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    background: #dddddd;
    text-align: center;
    padding: 13px;
	z-index: 999;
}


i.fas.fa-book-open {
    font-size: 1.5rem;
}

i.fab.fa-instagram {
    font-size: 1.5rem;
}


i.fab.fa-line {
    font-size: 1.5rem;
}


ul.link-icon {
    position: absolute;
    bottom: 50px;
    width: 20px;
}

.link-icon li {
margin-top: 20px;

}


    .sp-logo {
        display: none;
    }



/*========= トップイメージ ===============*/



.top-inner {
    display: flex;
    font-size: 1.8rem;
    line-height: 2;
    max-width: calc(100% - 100px);
    margin: 0 auto;
}



.image-area {
    width: 50%;
}



#leadarea {
    padding: 100px 0 75px;
    margin: 0 auto 100px;
    border-bottom: solid 1px;
    position: relative;
}
.leadarea-inner {
    font-size: 1.8rem;
    line-height: 2;
    max-width: calc(100% - 100px);
    margin: 0 auto;
}

.styling-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

.styling-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    
}




.titlearea {
    display: flex;
    max-width: 800px;
    margin: 150px auto 50px;
}
.title-catch {
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 1em;
}






.model {
    width: 25%;

}


.model-wrapper {
    display: flex;
    flex-wrap: wrap;
	align-items:stretch;
}

.img-l {
margin: 4px;
}
.img-m {
margin: 4px;
}


.item-description {
padding: 20px;
}

.item-description h4 {
    font-size: 1.6rem;
	font-weight: 600;
}

.item-text {
    margin: 1em 0 1em;
	font-size: 1.4rem;
}

.item-description ul{
display: flex;
flex-wrap: wrap;
}

.cyakuyo-list {
font-size: 1rem;
width: 100%;
}

    
    footer {
    text-align: center;
    font-size: 1rem;
    padding: 40px 0;
}

    
    /*==================================================
フェードアップ
===================================*/


/* fadeUp */

.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);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

@media screen and (min-width:320px) and ( max-width:1024px) {
    /*　画面サイズが320pxから1024pxまではここを読み込む　*/
	
	article {
    padding-right: 0;
}
	
	#header {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 50px;
    display: flex;
    flex-wrap: inherit;
    background: #dddddd;
    text-align: center;
    padding: 13px;
    z-index: 999;
}
	
	
ul.link-icon {
    position: absolute;
    top: 0;
    right: 20px;
    width: auto;
}	
	
	
	.link-icon li {
    margin-top: 10px;
    width: 20px;
    float: left;
    margin-left: 10px;
}
	
    
    
    .pc-logo {
        display: none;
    }    
    
	    .sp-logo {
        display: block;
            padding-top: 8px;
            height: 20px;
    }
	.top-inner {
    flex-wrap: wrap;
	max-width: 100%;
	}
	.image-area {
    width: 100%;
}

    .button03 a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2% auto 2%;
    padding: 1em 2em;
    width: 90%;
    color: #000;
    font-size: 1.6rem;
    font-weight: 500;
    border: 2px solid #000;
    /* text-align: center; */
}
    
.styling-wrapper ul {
    flex-wrap: wrap;
}


.model {
width: 50%;

}

    
 .model:last-child {
    padding-right: 0;
}   
 
    .titlearea {
    display: flex;
    width: 80%;
    max-width: 80%;
    margin: 100px auto 50px;
}
    
}