@charset "UTF-8";
html {font-size: 100%;}
a{text-decoration: none;}
body{background: #EEEEEE;}

/* --main------------------------------------------------------ */
main{width: 100%;height: auto;position: relative;top:70px;}
/* -section------------------------------------------------------ */
section h3{text-align: center;color:#b39978;font-size: 32px;margin-top: 15px;}
section span{font-size: 16px;}
section p{text-align: center;font-size: 14px;margin-top: -5px;}

.order_list{display: flex;justify-content: center;height: auto;
          margin: 20px 30px 50px 30px;padding-bottom: 170px;}
.box_a,.box_b{display: flex;}
.boader_1,.boader_2,.boader_3,.boader_4{width: 260px;height: 2px;background-color: black;}
.box_a p,.box_b p{font-size: 12px;padding: 5px 0 5px 5px;color:black;border-bottom: 2px dotted tan;}
.box_a_list,.box_b_list{margin: 0 10px 0 10px;}

/* --aside　パスワード SLIDE ---------------------------------------------------------- */
aside{position: fixed;bottom: 70px;display: flex;justify-content: center;
  width: 100%;height: 100px;background:darkolivegreen;}
input{width: 250px;height: 50px;border-radius: 10px;
  margin: 25px 0px 0 20px;text-align: center;
	font-size:15px;padding-top:5px; background-color:#b39978;color:black;}
input:hover{color: white;}
/* --slide---------------------------------------------------------- */
.slide{position:relative;width: 200px;height: 90px;z-index: -10;}
.slide img {position:absolute;
	          opacity:0;
	          transition:all 1s ease-in-out;
	          height:90px;margin-top: 5px;
	          object-fit:contain;}
#slide_speed{width: 20px;display: none;}

/* ---------------------------------------------------------footer-------------- */
footer{position: fixed;bottom: 0;
      width: 100%;height: 70px;background:black;}
.cresit{display: flex;justify-content: center;}
.dtmicon{width: 50px;height: 50px;margin-top: 10px;}
.jasrac{display: flex;}
.jasrac_mark{width: 50px;height: 50px;margin-top: 10px;margin-left: 50px;}
.jasrac p{font-size: 10px;color:tan;margin-top: 27px;margin-left: 20px;}

/* ---------レスポンシブ-------------------------------------------------- */

/* ---------1200px以下-------------- */
@media screen and ( max-width :1200px)
{
.order_list{margin: 10px 20px 20px 20px;padding-bottom: 160px;}
.order_list{flex-direction: column;height: auto;}
.boader_3,.boader_4{width: 260px;height: 0px;background-color: black;}
.box_a_list,.box_b_list{margin: 0 auto;}
}

/* ---------900px以下-------------- */
@media screen and ( max-width :900px)
{
.order_list{flex-direction: column;height: auto;
  margin: 10px 20px 20px 20px;padding-bottom: 170px;}
.boader_1,.boader_2{width: 250px;height: 2px;background-color: black;}
.boader_3,.boader_4{width: 250px;height: 0px;background-color: black;}
.box_a_list,.box_b_list{margin: 0 auto;}
}

/* ---------600px以下-------------- */
@media screen and ( max-width :600px)
{
main{top:50px;}
.order_list{margin: 10px 20px 20px 20px;padding-bottom: 130px;}
.boader_1,.boader_2{width: 200px;height: 2px;background-color: black;}
.boader_3,.boader_4{width: 200px;height: 0px;background-color: black;}
.box_a_list,.box_b_list{margin: 0 auto;}

/* -section------------------------------------------------------ */
section h3{font-size: 25px;margin-top: 10px;}
section span{font-size: 13px;}
section p{font-size: 11px;margin-top: -5px;}
/* --aside　パスワード SLIDE ---------------------------------------------------------- */
aside{bottom: 70px;height: 70px;}
input{width: 200px;height: 40px;border-radius: 5px;
    margin: 15px 0px 0 0px;font-size:12px;padding-top:3px;}
/* --slide---------------------------------------------------------- */
.slide{width: 150px;height: 50px;}
.slide img {height:50px;margin-top: 10px;}
}

/* ---------450px以下-------------- */
@media screen and ( max-width :450px)
{
/* -TOPに戻る------------------------------------------------------ */
.to_top{height: 40px;width: 70px;}

main{top:40px;}
/* -section------------------------------------------------------ */
section h3{font-size: 18px;margin-top: 10px;}
section span{font-size: 10px;}
section p{font-size: 10px;margin-top: 0px;}
.order_list{margin: 10px 0px 20px 0px;padding-bottom: 80px;}
.boader_1,.boader_2{width: 155px;height: 2px;background-color: black;}
.boader_3,.boader_4{width: 155px;height: 0px;background-color: black;}
.box_a_list,.box_b_list{margin: 0 auto;}
.box_a p,.box_b p{font-size: 10px;padding: 6px 0 5px 6px;
       color:black;border-bottom: 1.5px dotted tan;}
/* --aside　パスワード SLIDE ---------------------------------------------------------- */
aside{bottom: 40px;height: 55px;}
input{width: 170px;height: 25px;border-radius: 5px;padding-top: 2px;
     margin: 0px 0px 0px 0px;font-size:10px;}
/* --slide---------------------------------------------------------- */
.slide{width: 150px;height: 40px;}
.slide img {height:45px;margin-top: 5px;margin-left: 10px;}
/* ---------------------------------------------------------footer-------------- */
footer{height: 40px;}
.dtmicon{width: 30px;height: 30px;margin-top: 5px;}
.jasrac_mark{width: 30px;height: 30px;margin-top: 5px;margin-left: 40px;}
.jasrac p{font-size: 10px;margin-top: 13px;margin-left: 10px;}
}

/* ---------320px-------------- */
@media screen and ( max-width :320px)
{
.order_list{margin: 10px 0px 20px 0px;}
.boader_1,.boader_2{width: 140px;height: 2px;background-color: black;}
.boader_3,.boader_4{width: 140px;height: 0px;background-color: black;}
.box_a_list,.box_b_list{margin: 0 auto;}
.box_a p,.box_b p{font-size: 10px;padding: 6px 0 6px 5px;color:black;border-bottom: 1.5px dotted tan;}
/* ---------------------------------------------------------footer-------------- */
.dtmicon{width: 30px;height: 30px;margin-top: 5px;margin-left: 30px;}
.jasrac_mark{width: 30px;height: 30px;margin-top: 5px;margin-left: 20px;}
.jasrac p{font-size: 10px;margin-top: 13px;margin-left: 10px;}
}