@media screen and (max-width: 959px) {
/* 959px莉･荳九↓驕ｩ逕ｨ縺輔ｌ繧気SS�医ち繝悶Ξ繝�ヨ逕ｨ�� */
}
* {
margin : 0 ;
padding : 0 ;
font-size : 100% ;
}
body {
font-size : 75% ;
text-align : center ;
line-height : 1.4 ;
background-color: #fff5ec;
}
.pc{
display:block;
}
.mobile{
display:none;
}
.flex{
margin:0 auto;
width:80vw;
display: flex;
justify-content: space-between;
}
.height30px{
height:30px;
}
.height50px{
height:50px;
}
.position_center{
position:relative;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.position_center_top30{
position:absolute;
top:70%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
header{
}
header #top_image{
width:100%;
}
header h2{
position:relative;
z-index:10;
width:200px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-size:5vmax;
color:rgb(88, 88, 88);
font-weight:bold;
font-family:Georgia, 'Times New Roman', Times, serif;
}
main{
}
footer{
}
/* 繝輔Ρ繝�→蜃ｺ迴ｾ */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}
.fadeIn1{
animation-name:fadeInAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}
.fadeIn2{
animation-name:fadeInAnime;
animation-duration:3.0s;
animation-fill-mode:forwards;
opacity:0;
}
.fadeIn3{
animation-name:fadeInAnime;
animation-duration:4.0s;
animation-fill-mode:forwards;
opacity:0;
}
.fadeIn4{
animation-name:fadeInAnime;
animation-duration:5.0s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#okaimono{
text-shadow:1px 1px 4px gray;
position:absolute;
left:20%;
top:20%;
font-size:3vmax;
font-weight: bold;
color:coral;
font-family:Georgia, 'Times New Roman', Times, serif;
opacity:0.7;
}
#refresh{
text-shadow:1px 1px 4px white;
position:absolute;
left:20%;
top:40%;
font-size:3vmax;
font-weight: bold;
color:darkgreen;
font-family:Georgia, 'Times New Roman', Times, serif;
opacity:0.7;
}
#job{
text-shadow:1px 1px 4px white;
position:absolute;
right:20%;
top:20%;
font-size:3vmax;
font-weight: bold;
color:darkblue;
font-family:Georgia, 'Times New Roman', Times, serif;
opacity:0.7;
}
#tuin{
text-shadow:1px 1px 4px white;
position:absolute;
right:20%;
top:40%;
font-size:3vmax;
font-weight: bold;
color:darkmagenta;
font-family:Georgia, 'Times New Roman', Times, serif;
opacity:0.7;
}
#top_setumei{
width:500px;
text-align: center;
text-shadow:1px 1px 4px white;
position:absolute;
top:60%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size:2.5vmax;
font-weight: bold;
color:rgb(83, 83, 83);
font-family:Georgia, 'Times New Roman', Times, serif;
}
/* 繝上�繝医い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
#back {
display: none;
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 繝懊ち繝ｳ陬�｣ｾ */
.Button-style_1 {
width:70vw;
margin-top:5px;
font-family:'Courier New', Courier, monospace;
font-weight:bold;
font-size: 20px;
display: inline-block;
padding: 0.4em 1em 0.3em;
color: #ffffff;
border: none;
border-radius: 20px;
background-color: #fe9f9f;
background-size: 10px 10px;
background-image: radial-gradient(#ff929f 15%, transparent 20%),
radial-gradient(#ffb4bd 15%, transparent 20%);
background-position: 0 0, 15px 15px;
box-shadow: 2px 2px 4px gray;
}
.Button-style_2 {
width:70vw;
margin-top:5px;
font-family:'Courier New', Courier, monospace;
font-weight:bold;
font-size: 20px;
display: inline-block;
padding: 0.4em 1em 0.3em;
color: #ffffff;
border: none;
border-radius: 20px;
background-color: #81beff;
background-size: 10px 10px;
background-image: radial-gradient(#3b78fa 15%, transparent 20%),
radial-gradient(#1477e7 15%, transparent 20%);
background-position: 0 0, 15px 15px;
box-shadow: 2px 2px 4px gray;
}
@media screen and (max-width: 640px) {
.pc{
display:none;
}
.mobile{
display:block;
}
#top_image_hidari,#top_image_migi{
position:absolute;
top:0;
left:0;
width:100vw;
}
#logo_title{
margin:20px auto 0;
text-align: center;
width:50vw;
}
header h2{
/* display: none; */
/* position:relative;
top:20px;
left:50%;
-webkit-transform: translate(-50%, -50%); */
margin: 0 auto;
width:110px;
/* transform: translate(-50%, -50%); */
z-index:10;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-size:3vmax;
color:gray;
font-weight:bold;
font-family:Georgia, 'Times New Roman', Times, serif;
}
.position_center_top30{
position:absolute;
top:100px;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#okaimono{
position:absolute;
left:10%;
top:5%;
font-size:2vmax;
font-weight: bold;
color:coral;
font-family:Georgia, 'Times New Roman', Times, serif;
opacity:0.7;
}
#refresh{
text-shadow:1px 1px 4px white;
position:absolute;
left:10%;
top:15%;
font-size:2vmax;
font-weight: bold;
color:darkgreen;
font-family:Georgia, 'Times New Roman', Times, serif;
opacity:0.7;
}
#job{
text-shadow:1px 1px 4px white;
position:absolute;
right:10%;
top:5%;
font-size:2vmax;
font-weight: bold;
color:darkblue;
font-family:Georgia, 'Times New Roman', Times, serif;
opacity:0.7;
}
#tuin{
text-shadow:1px 1px 4px white;
position:absolute;
right:20%;
top:15%;
font-size:2vmax;
font-weight: bold;
color:darkmagenta;
font-family:Georgia, 'Times New Roman', Times, serif;
opacity:0.7;
}
#top_setumei{
padding-top:10px;
padding-bottom:10px;
width:100vw;
position:absolute;
/* position:relative; */
color: rgb(44, 44, 44);
top:20%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size:2vmax;
background-color: #ffffff66;
}
.box73{
width:80vw;
margin: 2em auto; /* 繝懊ャ繧ｯ繧ｹ縺ｮ菴咏區 */
background-color: #ebebeb; /* 繝懊ャ繧ｯ繧ｹ閭梧勹濶ｲ */
padding-top: 0 ; /* 繝懊ャ繧ｯ繧ｹ蜀��菴咏區 */
position:relative; /* 驟咲ｽｮ(縺薙％繧貞渕貅悶↓)*/
border: 1px solid #909792; /* 繝懊ャ繧ｯ繧ｹ縺ｮ邱� (螟ｪ縺輔遞ｮ鬘槭濶ｲ)*/
}
.box73 p{
margin-top:10px;
margin-bottom:10px;
}
.box73 .box-title {
width:100%;
background-color:#909792; /* 繧ｿ繧､繝医Ν閭梧勹濶ｲ */
font-size: 1em;/* 繧ｿ繧､繝医Ν譁�ｭ励�螟ｧ縺阪＆ */
color: #fff ; /* 繧ｿ繧､繝医Ν譁�ｭ苓牡 */
padding-top: 10px;/*繧ｿ繧､繝医Ν縺ｮ菴咏區*/
padding-bottom: 10px;/*繧ｿ繧､繝医Ν縺ｮ菴咏區*/
line-height: 1;/*繧ｿ繧､繝医Ν縺ｮ陦後�鬮倥＆*/
}
/* .yellow_line{
background-color: yellow;
width:70vw;
} */
/* �晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ昴♀蝠上＞蜷医ｏ縺幢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ晢ｼ� */
#otoiawase_box{
width: 85vw;
padding-top: 30px;
margin: 0px auto;
}
#otoiawase_box input{
outline: none;;
text-align: center;
width: 80vw;
height:20px;
margin: 5px auto;
}
#otoiawase_box textarea{
text-align: center;
width: 80vw;
margin: 5px auto;
resize: none;
}
.kakunin p{
text-align: center;
width:80vw;
background-color: #2371df;
color:white;
padding-top:3px;
padding-bottom:5px;
border-radius: 5px;
}
}