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

body{background:#F8FFD3;}
header{height: 70px;width: 100%; display: flex;position: fixed;
	justify-content: space-between; background:darkgreen;}
/* ---------title-------------- */
.title{width:80%;background: black; margin-left: 0px;}
.A h2{font-family: 'Playfair Display', serif;background: black;
   font-size:25px;color: tan;padding:15px;padding-left: 30px;}
.B h2{font-family: 'Playfair Display', serif;background:red;
	    font-size:25px;color: white;padding:15px;padding-left: 30px;}
.B span{color:yellow;}
/* ---------link-------------- */
.link{width:20%;display: flex; justify-content: center; margin-top: 15px;}

.sankaku_C{width:70px;height:40px;border-radius: 10px;
	         background: tan;margin:0px 10px 0 10px;
					 padding:7px;text-align: center;}
.sankaku_C h3{font-size:20px;color: darkgreen;}
.sankaku_C:hover{background:yellow;}

/* ---------aside-------------- */
.A a,.B a{display: block;color:white;font-size: 15px;padding-top:5px;}
#button_A{width:450px;border-radius: 10px;margin: 5px auto 10px;height: 30px;background: red;}
#button_B{width:450px;border-radius: 10px;margin: 5px auto 10px;height: 30px;background: black;}
#button_A:hover{background:black;}
.A h6:hover{color:yellow;}
#button_B:hover{background:red;}
.B h6:hover{color:yellow;}

aside{width:100%;height:110px;position: fixed;top:70px; background:#DFA362;text-align: center;}
audio{text-align: center;width: 500px; height:50px;margin: 10px auto 0;}

/* ---------main-------------- */
main{width: 100%;height: auto;text-align: center;position: relative;top:180px;z-index: -10;}
/* ---------main p{font-size:15px;padding-left: 200px;padding-right:200px;text-align: left;
	    padding-top:30px;line-height:2;margin: auto;}------------- */
.kasi{display: flex;justify-content: center;
	    font-size:15px;line-height: 2;
	      text-align: left;padding-top: 30px;padding-bottom: 150px;}
.kasi_1{margin-right: 50px;}
.kasi_2{margin-left: 50px;}
.kasi_3{margin-left: 100px;}

section{position: fixed;width: 100%;height: 70px;bottom: 70px;background:#F8FFD3;opacity: 80%}
footer{display: flex;position: fixed;bottom: 0;
	justify-content: center;
	padding-top:10px;padding-bottom: 10px;width: 100%;
	height: 70px;background: tan;}

.L{width: 100px;height:50px;background: tan;margin: 0 50px 0 0;}
.R{width: 100px;height:50px;border-radius: 50%;background: red;margin: 0 0 0 50px;}
.R a{font-size: 15px;color:white;display: block;text-align: center;padding-top: 14px;}
.R:hover{background: darkgreen;transition: all 0.7s ease-out;}
/*== グラデーションが流れる */
.gradient1{/*ボタンの形状*/
    display: inline-block;margin-top:0px;
    color:#fff;
    padding: 12px 60px;
    border-radius:30px;
    text-decoration: none;
    outline: none;
    /*背景の色と形状*/
    background: linear-gradient(270deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%);
    background-position: 1% 50%;
    background-size: 200% auto;
    /*アニメーションの指定*/
    transition: all 0.3s ease-out;}
/*hoverした際の、背景の場所とテキスト色の変更*/
.gradient1:hover {color: #fff;background-position: 99% 50%;}

/* ---------レスポンシブ-------------------------------------------------- */
/* ---------800px以下-------------- */
@media screen and ( max-width :700px)
{
body{background:white;}
header{background: #D46F09;}
/* ---------link-------------- */
.link{margin-top: 20px;}
.sankaku_C{width:70px;height:40px;margin:-5px 10px 0 10px;
					 padding:11px;}
.sankaku_C h3{font-size:15px;color: darkgreen;}

aside{background:#9E6CBA;}
audio{width: 400px; margin-top: 10px;}
#button_A{width:360px;}
#button_B{width:360px;}

h2{font-size:30px;padding-left: 20px;}
.A h2{font-size:20px;padding:20px;}
.B h2{font-size:20px;padding:20px;}
.B span{color:yellow;}
.kasi{flex-direction: column;font-size: 15px;padding-bottom: 150px;}
.kasi_1{margin-left: 100px;margin-right: 0;}
.kasi_2{margin-left: 100px;margin-right: 0;margin-top: 20px;}
.kasi_3{margin-left: 100px;margin-right: 0;margin-top: 20px;}

section{height: 50px;bottom: 70px;background:white;}
.gradient1{/*ボタンの形状*/
padding: 12px 30px;border-radius:30px;
background-position: 1% 50%;background-size: 200% auto;}
.L{width: 100px;height:50px;margin: 0 20px 0 0;}
.R{width: 100px;height:50px;margin: 0 0 0 20px;}
}

/* ---------450px以下-------------- */
@media screen and ( max-width :450px)
{
header{height: 45px;width: 100%;background:darkgreen;}
.title{width: 80%;background: darkred;}
.A h2{font-size:13px;padding-top:11px;padding-left: 10px;}
.B h2{font-size:13px;padding-top:11px;padding-left: 10px;}

.link{margin-top: 12px;width:20%;}

.sankaku_C{width:50px;height:30px;margin:-5px 12px 0 12px;
					 padding:9px;}
.sankaku_C h3{font-size:12px;}

main{top:150px;}
.kasi{flex-direction: column;font-size: 15px;padding-bottom: 100px;}
.kasi_1{margin-left: 50px;margin-right: 0;}
.kasi_2{margin-left: 50px;margin-right: 0;margin-top: 20px;}
.kasi_3{margin-left: 50px;margin-right: 0;margin-top: 20px;}

aside{height:110px;top:45px; background:tan;}
#button_A{width:250px;}
#button_B{width:250px;}

audio{width:80%; margin-top:8px;}
section{position: fixed;width: 100%;height:50px;bottom: 50px;background:white;}
footer{height: 50px;padding-top: 10px;padding-bottom: 10px;}
.gradient1{/*ボタンの形状*/padding: 4px 20px;margin-top:-4px;}
.L{width: 2px;height:30px;margin: 0 0 0 0;}
.R{width: 70px;height:30px;margin: -3px 0 0 7px;}
.R a{font-size: 12px;padding-top: 7px;}

/* ---------360px以下-------------- */
@media screen and ( max-width :360px)
{
.title{width:75%;background: black;}
.link{width:25%;}
.kasi{font-size: 15px;line-height:2;padding-bottom: 100px;}
.kasi_1{margin-left: 30px;margin-right: 0;}
.kasi_2{margin-left: 30px;margin-right: 0;margin-top: 20px;}
.kasi_3{margin-left: 30px;margin-right: 0;margin-top: 20px;}
audio{width:90%; margin-top:8px;}
.gradient1{/*ボタンの形状*/padding: 6px 20px;margin-top:-1px;}
.L{width: 2px;height:30px;margin: 0 0 0 0;}
.R{width: 70px;height:30px;margin: 0 0 0 7px;}
}

/* ---------320px以下-------------- */
@media screen and ( max-width :320px)
{
.kasi_1{margin-left: 20px;margin-right: 0;}
.kasi_2{margin-left: 20px;margin-right: 0;margin-top: 20px;}
.kasi_3{margin-left: 20px;margin-right: 0;margin-top: 20px;}
#button_A{width:200px;margin-top:4px;}
#button_B{width:200px;margin-top:4px;}
.gradient1{/*ボタンの形状*/padding: 1px 20px;}
.L{width: 2px;height:30px;margin: 0 0 0 0;}
.R{width: 70px;height:30px;margin: 0 0 0 7px;}
}