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

@media screen and (max-width:1200px) {
    header {
        width: 990px;
    }
    .headerflex a {
        font-size: 12px;
    }
    
   header .menuflex{
	margin-left: 10px;
    }
    
    header .phonenumber {
	font-size: 13px;
	padding: 10px 10px 15px 10px;
	width: 130px;
    }
    
    #instagram{
		max-width: 850px;
	}
	.whitebg{
		width: 810px;
	}

    /*access*/
        .totop{
      right: 5px;
    }
    
}

@media screen and (max-width:991px) {
    header .menuflex{
	margin-left: 40px;
    }
    .mobile-container{
        display: block;
        max-width: 100%;
        margin: 0;
        height: 58px;
        background-color: white;
        position: fixed;
        width: 100%;
        box-shadow: 0px 1px 10px #888888;
        z-index: 10000000;
}
    
    
    .topnav {
      display: block;
      height: 58px;
      overflow: hidden;
      background-color: white;
      position: relative;
    }
    
    .topnav .active {
        border-bottom: none!important;
        height: 58px;
    }
    
    .topnav .active img {
        display: block;
        margin: 10px auto 0;
    }

    .topnav #myLinks {
       display: none;
    }

    .topnav li > a, .topnav li>p{
       color: #555555;
       padding-top: 5px;
       text-decoration: none;
       font-size: 15px;
       display: block;
       text-align: center;
        font-weight: 500;
        line-height: 1.8em;
        border-bottom: 1px solid #e1e1e1;
    }
    
    .topnav .frist-border {
        border-top: 1px solid #e1e1e1;
    }

    .topnav a.icon {
        height: 58px;
        background: #ddd;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        padding: 20px 22px;
        color: #555;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
/*access*/
    
        .centervideo {
        width: 500px;
        height: 300px;
    }

        .totop{
            right: 5px;
            bottom: 50px;
    }

    
    
}

@media screen and (max-width:767px) {
/*共有*/
    .appear-1200 {
        display: none;
    }
        
    .appear-767 {
        display: block;
    }
    
    h2 {
        font-size: 28px;
        font-weight: 600;
        text-align: center;  
    }

    .english{
        display: inline-block;
        font-size: 14px;
        padding-top: 20px;
        padding-bottom: 30px;
        text-align: center;
        color: #555555;
    }

/*共有*/
/*header*/

header .phonenumber{
		font-size: 16px;
		width: 150px;
		padding: 5px;
	}
    
/*header*/
/*top*/
    .top .top-img {
        height: 300px;
    }
    
    .top .top-img h1 {
        top:0;
        margin-top: 110px;
        margin-right: 60px;
        font-size: 24px;

    }
    
    .top .name {
        margin: 0px auto 0;
        display: block;
    }

    .top .name p {
        margin-top: 30px; 
        text-align: center;
        font-size: 14px;
        line-height: 24px;
        color: #333;
    }

/*top*/
/*ご利用*/
    
    .about-use .step-list, .about-use .service-list {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 115px;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
    }
    
    .about-use .service-list {
        margin-bottom: 0px;
    }
    
    .about-use .step-list li, .about-use .service-list li {
        width: 40%;
        margin-bottom: 60px;
        text-align: center;
        font-size: 14px;
        line-height: 24px;
        color: #333;
        position: relative;
    }
    
    .about-use .step-list li:nth-child(n+2) , .about-use .service-list li:nth-child(n+2) {
        margin-bottom: 0;
    }

    .about-use .step-list li::after {
        content: url("../images/flow.png");
        position: absolute;
        bottom: 10%;
        right:0;
        margin-right: -30px;
    }

    .about-use .step-list li:nth-child(2n)::after {
        content: none;

    }

/*ご利用*/
/*main*/

.main .materiale-category li {
    margin-bottom: 10px;
    font-size: 14px;
}


.choice .choice-title {
    font-size: 26px;
}

.choice .choice-frame {
    width: 100%;
    max-width: 500px;
    margin: 50px auto 0;
    display: block;
}

.choice .choice-frame .choice-frame-item {
    max-width: 500px;
    margin: 0 auto 50px; 

}

.choice .choice-frame .choice-frame-item:last-of-type {
    margin-bottom: 0;
}



/*main*/
/*名入れ制作料金*/

.fee-list {
    display: block;
}


.fee-list > li {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 60px;

}

.fee-list > li:first-child{
    margin-bottom: 60px;
}

.fee-list li ul {
    margin-top: 20px;
    text-align: center;
    font-size: 22px;
}


/*名入れ制作料金*/
/*オプション*/
.option table {
    width: 340px;
}

.option .min-table {
    margin-bottom: 30px;
}

.option .note {
    width: 100%;
    max-width: 340px;

}

/*オプション*/
/*お問い合わせ*/
    #contact p{
        font-size: 16px;
        padding-top: 10px;
    }
/*お問い合わせ*/    
    
    
    
}

@media screen and (max-width:575px){

/*共有*/
    
    h2 {
        font-size: 24px;
    }

    .english{
        font-size: 12px;
        padding-top: 15px;
    }
    
    .sub-title {
        font-size: 20px;
    }

/*共有*/
/*top*/
    .top .top-img {
		background-position: left;
        height: 200px;
    }
    
    .top .top-img h1 {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 90px auto 0;
        font-size: 20px;
    }
    
    .top .name p {
        font-size: 12px;
    }
/*top*/
/*おすすめ*/

.recommended p {
    font-size: 14px;
}

.recommended .recommended-list{
    font-size: 14px;
}

    
/*おすすめ*/
/*ご利用*/

.about-use .service-list li .service {
    font-size: 14px;
}

/*ご利用*/
/*main*/

.choice .choice-title {
    font-size: 22px;
}

.main .points li {
    margin-top: 10px;
    font-size: 14px;
}

.choice .choice-frame .choice-list li {
    margin-top: 10px;
    font-size: 14px;

}

/*main*/
/*access*/
    #access .centermap {
        height: 300px;
    }
    
    #access td{
		    padding-left: 10px;
			font-size: 14px;
			width: 210px;
	}
    #access th{
		    padding-left: 5px;
			font-size: 14px;
			width: 90px;
	}
	footer p{
		font-size: 13px;
	}
    .totop{
  		right: 0px;
		bottom: 30px;
    }
    
	.totop img{
		width: 80px;
	}


}