@charset "UTF-8";
/* CSS Document ---------------------------------------------------------------------------------------------------------------- */
/* (C)advista */
/* Default Style Reset --------------------------------------------------------------------------------------------------------- */
body,form,fieldset{margin: 0px;padding: 0px;}
fieldset          {border:none;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,dd{margin: 0px;padding: 0px;}
blockquote,li,dt,dd{}
li                {list-style:none;}
input,textarea    {font-size: 1em;}
img{border: 0px none;margin: 0;padding: 0;vertical-align: bottom;}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

html              { scroll-behavior: smooth; height:100%;}

/* Tag Castam ----------------------------------------------------------------------------------------------------------------- */

body              {font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue,'Noto Sans JP', YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, 'UDShinMGoPro', 'Kosugi Maru' /*"TsukuBRdGothicStd",*/ sans-serif;
 color: #000; font-feature-settings: "palt"; font-style: normal; font-weight: 400; overflow:hidden auto;}
em                {font-weight: normal; font-style: normal;}
strong            {}
a                 {text-decoration: none; color: #000;}
a:link            {}
a:hover           {text-decoration: none; /*opacity: 0.5;*/}
a:visited         {}
a:active          {}

/* 小杉丸ゴシック／モトヤマルベリ(Kosugi Maru) */
@font-face {
	font-family: 'Kosugi Maru';
	font-style: normal;
	font-weight: 400;
	src: url('../font//KosugiMaru-Regular.woff2') format('woff2'), url('../font/KosugiMaru-Regular.woff') format('woff'), url('../font/KosugiMaru-Regular.ttf') format('truetype'); 
}

.flex                          { display:flex;}
.center                        { text-align:center;}

/* h1                             { font-size: 2rem; color: #a2843d; line-height: 2.75rem; margin-bottom: 30px;}*/

/*h2                             { font-size: 1.5rem; color: #a2843d; line-height: 2.2rem; margin-bottom: 15px;}*/

p                              { font-size: 1.1rem; line-height: 1.6rem; letter-spacing:-0.05em; color: #475155; font-family: 'Kosugi Maru',sans-serif;}

#contbox                       { max-width:800px; margin:0 auto; padding: 30px 0 20px; background:url(../img/pc_back.jpg) no-repeat; background-size:100%; z-index:-9999;}

#sect01                        { max-width:680px; margin:0 auto; margin-bottom: 15px;}
#sect01 .pc_img                { width:90%; margin:0 auto;}
#sect01 img                    { width: 100%; margin-bottom: 25px;}

#sect02                        { max-width:730px; margin:0 auto; margin-bottom: 25px;}
#sect02 ul                     { margin-bottom: 25px;}
#sect02 .pc_img                { width:93%; margin:0 auto;}
#sect02 img                    { width: 100%;}

#sect03                        { max-width:680px; margin:0 auto;}
#sect03 img                    { margin-bottom: 15px;}
#sect03 ul                     { margin-bottom: 28px;}
#sect03 hr                     { border: 1px solid #a2843d;}
#sect03 .lineup_heading        { max-width: 280px; margin:0 auto;}
#sect03 .lineup_heading img    { width: 100%; height: auto;}
#sect03 .lineup img            { width: 100%; height: auto;}
#sect03 .leftbox               { margin-right: 30px;}  
#sect03 .leftcell              { width: 10.75rem;}

#sect04                        { max-width:680px; margin:0 auto; margin-bottom: 15px;}
#sect04 ul                     { flex-wrap: wrap; justify-content: space-between;}
#sect04 ul img                 { max-width: 335px;}
#sect04 ul li:nth-child(1),
#sect04 ul li:nth-child(2)     { margin-bottom: 0.55rem;}

#annotation                    { max-width:680px; margin:0 auto;}
#annotation p                  { font-size: 0.9rem;  line-height: 1.3rem;}

#linkbtn                       { max-width:205px; margin:0 auto; padding: 20px 0; z-index: 1;}
#linkbtn ul                    { justify-content: space-between;} 
#linkbtn a                     { display: block; width: 100%; height: 100%; position: relative; z-index: 9999; pointer-events: auto;}    

.copy                          { max-width:680px; margin:0 auto}

.sp_txt                        { display: none;}
.sp_img                        { display: none;}


@media screen and (max-width: 1200px) {
    .sp_txt                    { display: none;}
	.sp_img                    { display: none;}

	#contbox                   { padding: 20px 40px;}

}

@media screen and (max-width: 1024px) {
	.sp_txt                    { display: none;}
	.sp_img                    { display: none;}

	#contbox                   { padding: 20px 40px;}

}

@media screen and (max-width: 570px) {
	.pc_txt                    { display: none;}
	.pc_img                    { display: none;}
    .sp_txt                    { display: block;}
	.sp_img                    { display: block;}

	p                          { font-size: 0.95rem;}

	#contbox                   { padding: 20px;}

	#sect01 .sp_img            { width:85%; margin:0 auto;}
    
	#sect02 ul                 { max-width:570px; margin:0 auto; margin-bottom: 20px;}
	#sect02 ul img             { width:100%; height: auto;} 
	#sect02 .sp_img            { width:75%; margin:0 auto;}

	#sect03 .pricebox p        { font-size: 0.8rem;}
	#sect03 .leftbox           { margin-right: 13px;}
	#sect03 .leftcell          { width: 8.5rem;}
	#sect03 .lineup_heading img{ width: 75%; height: auto;}

    #sect04 .sp_img img        { width: 100%; height: auto;}

	#annotation p              { font-size: 0.75rem;}

}