@charset "UTF-8";
$font-main: 'Montserrat', "M PLUS 1p", sans-serif;
$font-ga: 'Montserrat', "M PLUS 1p", sans-serif;
$font-times: 'Montserrat', "Times New Roman", "M PLUS 1p", "sans-serif";
$font-go:'Montserrat', "M PLUS 1p", sans-serif;

$color-bg: #F9F9F9;
$color-main: #e1e0d9;
$color-green: #7b8889;
$color-gold: #b3a86d;
$color-orange: #e76140;
$color-red: #df3b1b;
$color-info: #f7f7f7;
$color-grey: #769777;
$color-blue: #002639;

$color-0:#000000;
$color-1:#3f4d49;
$color-2:#6d7375;
$color-2_5:#848484;
$color-3:#d8d8d8;
$color-4:#e5e5e5;
$color-5:#f4f4f4;



/* ==========================================================================

	common style
	
========================================================================== */
html {
	font-size: 62.5%; 
	font-family: $font-main;
}

body {
	font-size: 1.2rem;
	background: #ffffff;
	position: relative; 
	color: $color-0;
    background: #000;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
body.overflow{
	overflow: hidden;
}

main {
	position: relative; 
	overflow: hidden;
}
input:-internal-autofill-selected {
	background-color: #fbfbfd !important; 
}

a{
	color: $color-1;
	text-decoration: none;
}

a:hover {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all  1s; }


#loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #000;
}
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
}
.momentum {
  --uib-size: 40px;
  --uib-speed: 1.1s;
  --uib-color: white;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--uib-size);
  width: var(--uib-size);
  animation: rotate var(--uib-speed) linear infinite;
}

.momentum::before,
.momentum::after {
  content: '';
  height: 25%;
  width: 25%;
  border-radius: 50%;
  background-color: var(--uib-color);
}

.momentum::before {
  animation: wobble2 calc(var(--uib-speed) * 1.25) ease-in-out infinite;
}

.momentum::after {
  animation: wobble calc(var(--uib-speed) * 1.25) ease-in-out infinite;
}

.momentum::before {
  margin-right: 10%;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(calc(var(--uib-size) * 0.2)) scale(1.1);
  }
}

@keyframes wobble2 {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(calc(var(--uib-size) * -0.2)) scale(1.1);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ==========================================================================

	animation
	
========================================================================== */


.fadein {
  opacity: 0;
  transform: translate(0, 20px);
  transition: .8s linear;}

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

.display-none {
  display: none; }

.opacity-0 {
  opacity: 0; }

.linkanime,
.linkanime::after {
  -webkit-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1); }




/* ==========================================================================

	pagetop
	
========================================================================== */


.pagetop{
    content: "";
    display: inline-block;
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    background: #fff;
    transition: all .5s cubic-bezier(.19,1,.22,1);
    &::after{
        content: '';
        width: 9px;
        height: 9px;
        border: 0;
        border-top: solid 2px #000;
        border-right: solid 2px #000;
        position: absolute;
        top: 31px;
        right: 24px;
        margin-top: -4px;
        transform: rotate(-45deg);
        transition: all .5s cubic-bezier(.19,1,.22,1);
    }
    @media only screen and (max-width: 768px) {
        
    }
    @media only screen and (min-width: 769px) {
        &:hover {
            transition: all .5s cubic-bezier(.19,1,.22,1);
            background: #000;
            transition: all .5s cubic-bezier(.19,1,.22,1);
            &::after{
                border-top: solid 2px #fff;
                border-right: solid 2px #fff;
            }
        }
    }
}


.info{
    position: fixed;
    bottom: calc(50% - 41px);
    right: 2vmax;
    margin: 0;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    z-index: 100;
    text-align: right;
    font-size: 11px;
     @media only screen and (max-width: 768px) {
         display: none;
    }
}

.archive_page{
    .info{
        color: #fff;
    }
}

/* ==========================================================================

	g-nav
	
========================================================================== */

.sidebar {
	.g-nav {
		list-style: none;
		margin: 0;
        font-size: 1em;
        letter-spacing: 0.6px;
        @media only screen and (max-width: 768px) {
            display: none;
            position: absolute;
			top: 0px;
			left: 0;
			width: 100%;
			background: #000;
			height: 100vh;
			padding: 61px 40px 50px;
            z-index: 1000;
        }
		ul {
            margin: 0px 0 0 20px;
            @media only screen and (max-width: 768px) {
                margin: 0px 21px;
            }
            li{
                width: 96px;
                color: #fff;
                @media only screen and (max-width: 768px) {
                    font-size: 13px;
                    width: 100%;
                }
                .menu_txt{
                    margin: 100px 0 0;
                    font-size: 13px;
                    span{
                        font-size: 18px;
                        font-weight: bold;
                        letter-spacing: 1px;
                        margin: 0 0 5px;
                        font-style: italic;
                        font-family: Didot, "Didot LT STD", "Bodoni MT", "ltc-bodoni-175", "Hoefler Text", Garamond, "Times New Roman", serif;
                    }
                    @media only screen and (max-width: 768px) {
                        width: 100%;
                        margin: 0 0 20px;
                    }
                }
                .copy{
                    width: 100%;
                    text-align: center;
                    font-size: 10px;
                    letter-spacing: 1px;
                    margin: 80px 0 0;
                    @media only screen and (max-width: 768px) {
                        margin: 70px 0 0;
                    }
                }
            }
			li:not(:last-child) {
                margin: 0 0 20px auto;
                @media only screen and (max-width: 768px) {
                    margin: 0 0 20px 0;
                }
			}
		}
        .menu_txt_area{
            margin: 50px 0 0;
            font-size: 11px;
            opacity: 0.5;
        }
        .active{
           position: relative;
            &::before{
                content: "";
                display: inline-block;
                position: absolute;
                width: 8px;
                height: 8px;
                margin: 0;
                background-size: contain;
                top: 7px;
                left: -20px;
                background: #fff;
                border-radius: 50%;
            }
            @media only screen and (min-width: 769px) {
                &::after{
                    transform-origin: 100% 50%;
                    transform: scale3d(1, 1, 1) !important;
                    transition: transform 0.3s;
                }
            }
        }
        
	}
    
    .inner{
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
}

.menu-trigger{
	display: none;
}
@media only screen and (max-width: 768px){
	.menu-trigger{
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	  cursor :pointer;
	}
	.menu-trigger{
		position: fixed;
		top: 33px;
        right: 9px;
		-webkit-transform: translate(0, -50%); /* Safari¨ */
		transform: translate(0, -50%);
		width: 50px;
		height: 37px;
		z-index: 2;
		margin: 0;
        z-index: 10000;
	}
	.menu-trigger:after, .menu-trigger:before {
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: -3px;
	  margin: auto;
	  display: block;
	  width: 50%;
	  height: .1rem;
	  content: "";
	  background-color: #fff;
	  transition: width .2s cubic-bezier(.19, 1, .22, 1), top .2s cubic-bezier(.19, 1, .22, 1), bottom .2s cubic-bezier(.19, 1, .22, 1), transform .2s cubic-bezier(.19, 1, .22, 1)
	}

	.menu-trigger:before {
	  top: -.6rem
	}

	.menu-trigger:after {
	  bottom: -.6rem
	}

	.menu-trigger.active:before {
	  top: 0;
	  width: 50%;
	  transform: rotate(45deg)
	}

	.menu-trigger.active:after {
	  bottom: 0;
	  width: 50%;
	  transform: rotate(-45deg)
	}
}


@media only screen and (max-width: 768px){
	.head-animation {
	  transform: translateY(-100%);
	}
}

@media only screen and (min-width: 769px){
	header.is-animation {
		&:hover{
			background-color: rgba(255, 255, 255, 1);
		}
	}
}

/* ==========================================================================

	footer
	
========================================================================== */

footer{
	width: 100%;
	background: #ffffff !important;
	margin: 0px auto 0;
    max-width: 2000px;
    padding: 50px 120px 160px;
	@media only screen and (max-width: 768px) {
		margin: 0px auto 0;
        padding: 50px 20px 60px;
        background: #000;
	}
	.copy{
		width: 100%;
		text-align: center;
		font-size: 10px;
		letter-spacing: 1px;
		margin: 80px 0 0;
		@media only screen and (max-width: 768px) {
			margin: 70px 0 0;
            color: #fff;
		}
	}
    .back_top {
        text-align: center;
    }
}

/* ==========================================================================

	btn-list
	
========================================================================== */

.link_box {
	background-color: #000;
	border: 1px solid #000;
	align-items: center;
	padding: 16px 10px;
	color: #fff;
	font-size: 13px;
    letter-spacing: 1px;
	position: relative;
	text-align: center;
	z-index: 10;
    border-radius: 4px;
	&::after{
		content: "";
		display: inline-block;
		width: 11px;
		height: 11px;
		margin: 0px 0px 2px 10px;
		background: url("../img/common/arrow_r_w.svg") no-repeat;
		background-size: contain;
		vertical-align: sub;
	}
	@media only screen and (max-width: 768px) {
		width: 100%;
	}
	@media only screen and (min-width: 769px) {
	  &:hover {
			background-color: #fff;
			border: 1px solid #000;
			color: #000;
		 	 &::after{
				content: "";
				display: inline-block;
				width: 11px;
				height: 11px;
				margin: 0px 0px 2px 10px;
				background: url("../img/common/arrow_r.svg") no-repeat;
				background-size: contain;
				vertical-align: sub;
			}
		}
	}
}

/* ==========================================================================

	index.html
	
========================================================================== */


main{
	width: 100%;
	position: relative;
	@media only screen and (max-width: 768px){
		padding: 0px 0 10px;
		margin: 0px 0 0;
	}
}

.top_page{
    main{
       background: #fff; 
        padding: 100px 30px;
        .logo{
            width: 100px;
            margin: 0;
        }
        .title{
            font-size: 16px;
            margin: 50px 0 20px;
            letter-spacing: 1px;
            @media only screen and (max-width: 768px){
                margin: 20px 0 20px;    
            }
        }
        .about_title{
            margin: 70px 0 0;
        }
        .txt{
            font-size: 11px;
            margin: 0 0 30px;
            line-height: 2;
        }
        .link_txt{
            font-size: 15px;
            margin: 0 0 20px 20px;
            font-weight: 500;
            position: relative;
            &::before{
                content: "";
                display: inline-block;
                position: absolute;
                width: 8px;
                height: 8px;
                margin: 0;
                background-size: contain;
                top: 7px;
                left: -18px;
                background: #000;
                border-radius: 50%;
            }
        }
    }
    footer{
        .copy{
            color: #000000;
        }
    }
}

#particles-js{ 
	position:fixed;
	z-index:-1;
	width: 100%;
	height: 100%;
	background-color:#000;
}

.archive_top{
    .sidebar{
        width: 400px;
        min-height: 100vh;
        padding: 20vh 50px;
        position: relative;
        @media only screen and (max-width: 768px){
            width: 100%;
            padding: 0;
            min-height: 10px;
        }
        .inner{
            @media only screen and (min-width: 769px){
                position: fixed;
                top: 50%;
                left: 40px;
                -webkit-transform: translate(0%, -50%);
                transform: translate(0%, -50%);
                width: 320px;
            }
            @media only screen and (max-width: 768px){
                position: relative;
                width: 100%;
                padding: 30px;
            }
        }
        .star{
            width: 50px;
            margin: 0 0 10px;
            @media only screen and (max-width: 768px){
                 width: 20px;
                margin: 0 0 10px;
            }
            
        }
        .logo{
            width: 100%;
            margin: 0 0 20px; 
        }
        .title{
            font-size: 16px;
            margin: 50px 0 20px;
            letter-spacing: 1px;
            color: $color-main;
            @media only screen and (max-width: 768px){
                margin: 20px 0 20px;    
            }
        }
        .txt{
            color: $color-main;
            font-size: 11px;
            margin: 0 0 10px;
            line-height: 2;
        }
        .txt_2{
            color: $color-main;
            font-size: 10px;
            line-height: 2;
            opacity: 0.8;
        }
        .copy{
            margin: 30px 0 0;
            color: $color-main;
            font-size: 10px;
            line-height: 2;
            opacity: 0.8;
        }
    }
    .book_start{
        width: calc(100% - 400px);
        padding: 40px 30px 80px;
        background: $color-bg;
        @media only screen and (max-width: 768px){
            width: 100%;
            padding: 30px 20px 100px;
        }
        .title{
            font-size: 16px;
            margin: 30px 0 20px;
            letter-spacing: 1px;
        }
        .txt{
            font-size: 11px;
            margin: 0 0 10px;
            line-height: 2;
        }
        .txt_2{
            font-size: 10px;
            line-height: 2;
            opacity: 0.8;
        }
        .copy{
            margin: 30px 0 0;
            font-size: 10px;
            line-height: 2;
            opacity: 0.8;
        }
        .h-img{
            max-width: 600px;
            margin: 0 auto;
            padding: 30px;
            background: #fff;
            @media only screen and (max-width: 768px){
                padding: 0px;
            }
        }
        .link_box{
            width: 300px;
            margin: 50px auto;
            @media only screen and (max-width: 768px){
                width: 100%;
                margin: 20px auto 0;
            }
        }
        .sp{
            padding: 0px;
        }
        .information{
            max-width: 600px;
            margin: 0 auto;
            padding: 30px;
            @media only screen and (max-width: 768px){
                padding: 0 20px;
                margin: 70px auto 0;
            }
            .info_title{
                font-size: 15px;
                margin: 0 0 20px;
                font-weight: 500;
                position: relative;
                &::before{
                    content: "";
                    display: inline-block;
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    margin: 0;
                    background-size: contain;
                    top: 7px;
                    left: -18px;
                    background: #000;
                    border-radius: 50%;
                }
            }
            .txt{
                font-size: 12px;
                line-height: 2;
                opacity: 0.7;
                margin: 0 0 60px;
            }
            .nav{
                margin: 0px 0;
                border-top: 1px double #000;
                li{
                    padding: 20px 80px 20px 0;
                    border-bottom: 1px double #000;
                    position: relative;
                    transition: all .5s cubic-bezier(.19,1,.22,1);
                    @media only screen and (max-width: 768px){
                        padding: 20px 50px 20px 0;
                    }
                    &::after{
                        content: '';
                        width: 9px;
                        height: 9px;
                        border: 0;
                        border-top: solid 2px #000;
                        border-right: solid 2px #000;
                        position: absolute;
                        top: 50%;
                        right: 30px;
                        margin-top: -4px;
                        transform: rotate(45deg);
                        transition: all .5s cubic-bezier(.19,1,.22,1);
                        @media only screen and (max-width: 768px){
                            right: 15px;
                        }
                    }
                    @media only screen and (min-width: 769px){
                        &:hover{
                            padding: 20px 80px 20px 20px;
                            background: #000;
                            color: #fff;
                            &::after{
                                right:20px;
                                border-top: solid 2px #fff;
                                border-right: solid 2px #fff;
                            }
                        }
                    }
                    .nav_title{
                        font-size: 16px;
                        margin: 0 0 4px;
                        letter-spacing: 1px;
                         @media only screen and (max-width: 768px){
                             font-size: 14px;
                        }
                    }
                    .nav_txt{
                        font-size: 12px;
                        opacity: 0.8;
                        margin: 0 0 0 28px;
                        @media only screen and (max-width: 768px){
                             font-size: 11px;
                            margin: 0 0 0 23px;
                        }
                    }
                    .page{
                        font-size: 11px;
                        text-align: right;
                        opacity: 0.7;
                        @media only screen and (max-width: 768px){
                            font-size: 10px;
                        }
                    }
                }
            }
        }
        .menu_title{
            width: 80px;
            margin: 80px auto 0;
        }
        .book_menu{
            max-width: 600px;
            margin: 40px auto 100px;
            @media only screen and (max-width: 768px){
                margin: 40px auto 0;
            }
            li{
                padding: 30px 30px;
                &:hover{
                    background: #000;
                    img{
                        -webkit-filter: brightness(0) invert(1);
                         filter: brightness(0) invert(1);
                    }
                }
            }
            li.soutou{
                img{
                   width: 425px; 
                }
            } 
            li.doppel{
                img{
                   width: 481px; 
                }
            }
        }
    }
    
}


.archive_page{
    .sidebar{
        width: 100%;
        padding: 50px 80px;
        max-width: 1500px;
        margin: 0 auto;
        @media only screen and (max-width: 768px){
            padding: 0px 0px;
        }
        @media only screen and (max-width: 768px){
            .inner{
                padding: 30px 30px 30px;
            }
        }
        .star{
            width: 30px;
            margin: 0 0 10px;
        }
        .logo{
            width: 300px;
            margin: 0 0 20px; 
        }
        .logo_2{
            width: 300px;
            margin: 0 0 0px;
            @media only screen and (max-width: 768px){
                display: none;
            }
        }
        .title{
            font-size: 12px;
            margin: 10px 0 20px;
            letter-spacing: 1px;
            color: $color-main;
        }
        .txt{
            color: $color-main;
            font-size: 11px;
            margin: 0 0 10px;
            line-height: 2;
        }
        .txt_2{
            color: $color-main;
            font-size: 10px;
            line-height: 2;
            opacity: 0.8;
        }
        .copy{
            margin: 30px 0 0;
            color: $color-main;
            font-size: 10px;
            line-height: 2;
            opacity: 0.8;
        }
    }
    .book_start{
        width: 100%;
        padding:  0 80px 80px;
        max-width: 1500px;
        margin: 0 auto;
        @media only screen and (max-width: 768px){
            padding: 0px 0px;
        }
        .page_title{
            color: $color-bg;
            font-size: 12px;
            margin: 0 0 20px;
            letter-spacing: 1px;
            @media only screen and (max-width: 768px){
                padding: 0 0 0 0px;
                text-align: center;
            }
        }
        .link_box{
            width: 230px;
            margin: 100px auto 0;
            @media only screen and (max-width: 768px){
                margin: 50px auto;
            }
        }
        .last_txt{
            margin: 150px auto 0;
            @media only screen and (max-width: 768px){
                margin: 80px auto 0;
                padding: 0 30px;
            }
            .txt01{
                color: $color-bg;
                text-align: center;
                line-height: 2;
                font-size: 13px;
            }
            .txt02{
                color: $color-bg;
                text-align: center;
                line-height: 2;
                opacity: 0.8;
                font-size: 11px;
                margin: 40px 0 0;
                @media only screen and (max-width: 768px){
                    text-align: left;
                }
            }
            .txt03{
                color: $color-bg;
                text-align: center;
                line-height: 2;
                opacity: 0.8;
                font-size: 11px;
                margin: 30px 0 0;
            }
        }
        .page_list{
            background: $color-bg;
            padding: 30px;
            @media only screen and (max-width: 768px){
                padding: 20px;
            }
            li{
                width: 100%;
                margin: 0 0 40px;
                @media only screen and (max-width: 768px){
                    margin: 0 0 30px;
                    img{
                        margin: 0 0 10px;
                    }
                }
                .img{
                  position: relative;
                    
                    &:before{
                        content: '@inga';
                        position: absolute;
                        color: #818181;
                        font-size: 11px;
                        right: 10px;
                        bottom: 10px;
                        opacity: 0.6;
                         @media only screen and (max-width: 768px){
                             font-size: 10px;
                        }
                    }
                    .bg_img{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                        background: #000;
                        opacity: 0;
                        top: 0;
                        left: 0;
                    }
                }
            }
        }
    }
}
    

.mihatenoyama{
    .book_start{
            max-width: 1000px;
    }
}

/* ================================================================================

 *  book dairy
　
   ================================================================================ */

#bookpage{
    background: #ffffff !important;
}
#bookpage,#aboutpage{
    main{
        max-width: 900px;
        padding: 0px 20px;
        margin: 20px auto;
        .logo{
            width: 60px;
            margin: 0 auto 20px;
        }
    }
    .page_title {
        font-weight: 800;
        font-size: 21px;
        margin: 0 0 3px;
    }
}

article{
	margin: 0 auto 30px;
	padding: 0 0 30px;
    .memo_list{
        border-top: 1px solid #EAEAEA;
        padding: 0;
        margin: 40px 0 0;
        @media only screen and (max-width: 768px){
            margin: 30px 0 0;
        }
        li{
            list-style: none;
	        border-bottom: 1px solid #EAEAEA;
            padding: 30px;
            @media only screen and (max-width: 768px){
                padding: 20px;
            }
        }
    }
	.date{
		font-size: 10px;
		margin: 0 0 3px;
        letter-spacing: 1px;
	}
	.title{
		font-size: 18px;
		font-weight: bold;
		margin: 0 0 12px;
	}
	.txt{
		font-size: 13px;
		margin: 0 0 10px;
		@media only screen and (max-width: 768px){
			font-size: 12px;
		}
	}
	.txt_2{
		font-size: 11px;
		margin: 0 0 10px;
	}
	.link_area{
		margin: 30px 0;
		.link_title{
			font-size: 12px;
		}
		.link_url a{
			color: #000;
			text-decoration: underline;
		}
		.comennt{
			font-size: 10px;
			margin: 4px 0 0;
		}
	}
}
.bookpage{
	.book_info{
		margin: 0 0 15px;
		li{
			font-size: 12px;
			margin-right: 14px;
		}
	}
}

/* ================================================================================

 *  book dairy
　
   ================================================================================ */

.sample{
	max-width: 900px;
	padding: 0;
	margin: 40px auto;
}
.sample_img{
	width: 100%;
	position: relative;
	margin: 0 auto 20px;
	.bg{
		position: absolute;
		height: 100%;
		width: 100%;
		background: #fff;
		opacity: 0;
		z-index: 100;
		top: 0;
		left: 0;
	}
}

/* ================================================================================

 *  doujin_page
　
   ================================================================================ */

.doujin_page{
	background: #F4F2F3;
	main{
		max-width: 480px;
		margin: 0 auto;
		padding: 24px 33px 26px;
		@media only screen and (max-width: 768px){
		        padding: 16px 20px 20px;
		}
	}
	.logo{
		width: 40px;
		margin: 0 auto;
	}
	.icon{
		width: 90px;
		height: 90px;
		margin: 10px auto;
		overflow: hidden;
		border-radius: 50%;
	}
	.name{
		font-size: 12px;
		margin: 0 0 20px;
		text-align: center;
		letter-spacing: 1px;
	}
	.block{
		margin: 20px 0;
		padding: 12px;
		border-left: 1px solid #A0A0A0;
    	border-right: 1px solid #A0A0A0;
		.title{
		    font-size: 12px;
			font-weight: bold;
			margin: 0 0 5px;
			@media only screen and (max-width: 768px){
				font-size: 11px;
			}
		}
		.txt{
			font-size: 12px;
			@media only screen and (max-width: 768px){
				font-size: 11px;
			}
		}
	}
	.sns_list{
		margin: 10px auto;
		li{
			border-left: 1px solid #A0A0A0;
			border-right: 1px solid #A0A0A0;
			padding: 12px;
			.sns_icon{
				width: 40px;
        		height: 40px;
				border-radius: 9px;
				box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
				overflow: hidden;
				margin: 0 10px 0 0;
				padding: 7px;
				img{
					opacity: 0.6;
				}
			}
			.txtbox{
				width: calc(100% - 50px);
				.l{
					 font-size: 12px;
					font-weight: bold;
					margin: 0 0 2px;
				}
				.s{
					font-size: 11px;
				}
			}
			&:not(:last-child) {
				margin: 0 0 10px;
			}
		}
	}
	.sample_area{
		margin: 50px auto 0;
		.title{
			font-size: 12px;
			font-weight: bold;
			margin: 0 0 8px;
		}
		.sample_block{
			.img{
				width: 100%;
				position: relative;
			}
			.link_icon{
				position: absolute;
				bottom: 19px;
				right: 10px;
				padding: 3px;
				display: inline-block;
				border-radius: 9px;
				padding: 3px 7px;
				background: #E40082;
				box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
				z-index: 100;
				color: #ffffff;
			}
		}
		.sample_info{
			border-left: 1px solid #A0A0A0;
			border-right: 1px solid #A0A0A0;
			padding: 12px;
			margin: 4px 0 0;
			.l{
				font-size: 12px;
				font-weight: bold;
				margin: 0 0 2px;
			}
			.s{
				font-size: 11px;
			}
		}
		.link_list{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: 1fr;
			grid-column-gap: 20px;
			grid-row-gap: 0px;
			margin: 13px 0 0;
			li{
				i{
					width: 12px;
					margin: 2px 2px 0 0;
					filter: invert(1);
				}
				background: #E40082;
				color: #ffffff;
				text-align: center;
				padding: 6px;
				box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
			    border-radius: 9px;
			}
		}
	}
	.cover_img{
		position: relative;
		.cover{
			position: absolute;
			background: #ffffff;
			z-index: 10;
			opacity: 0;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	footer {
		width: 100%;
		background: #F4F2F3 !important;
		margin: 0px auto 0;
		padding: 20px;
		.copy{
			color: #000000;
			opacity: 0.5;
		}
	}
}

.sample_page{
	.sample_area{
		margin: 20px auto 0;
	}
}