@charset "utf-8";

/* 全体のスタイル　*/

*{
 box-sizing: border-box;
}

/* bodyの初期スタイル　*/
body {
font-size: 16px;
line-height: 1;
font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Arial,"メイリオ",Meiryo,system-ui,sans-serif;
color:#333;
margin-top: 0;
}


/* ヘッダースタイル　*/
h1{
font-size:1rem;
z-index:100;
position:fixed;
margin-top: 0;
}

h1 img{
max-width:100%;

}

h1 p{
  position: absolute;
  color: black;
  top: 5px;
  right: 10px;
font-size:0.5rem;

  }

.menu{
  position: absolute;
  color: black;
  top: 45px;
  right: 10px;
font-size:0.7rem;
  }


.menuimg{
height:1.5rem;
  }

.menuimg:hover {
  opacity: 0.5;
}




@media screen and (min-width: 768px) {
  h1 {
    text-align: center;
  }


h1 p{
  position: absolute;
  color: black;
  top: 10px;
  right: 10px;
font-size:1rem;
  }
  
.menu{
  position: absolute;
  color: black;
  top: 75px;
  right: 10px;
font-size:1rem;
  }


.menuimg{
height:2rem;
  }

.menuimg:hover {
  opacity: 0.5;
}


}



@media screen and (min-width: 950px) {
  h1 {
    text-align: center;
  }


h1 p{
  position: absolute;
  color: black;
  top: 20px;
  right: 100px;
font-size:1.2rem;
  }
  
.menu{
  position: absolute;
  color: black;
  top: 130px;
  right: 100px;
  }

.menuimg{
height:3rem;
  }

.menuimg:hover {
  opacity: 0.5;
}


}







/* 見出しスタイル　*/
h2{
margin-bottom:16px;
text-align:center;
}

h2 img{
height:2.5rem;
text-align:center;
}

h3{
margin-bottom:16px;
text-align:center;
font-size:1rem;
}


@media screen and (min-width: 768px) {

h2{
margin-bottom:16px;
text-align:center;
}

h2 img{
height:4rem;
text-align:center;
}

h3{
margin-bottom:16px;
text-align:center;
font-size:1.5rem;
}
}


@media screen and (min-width: 950px) {

h2{
margin-bottom:16px;
text-align:center;
}

h2 img{
height:4rem;
text-align:center;
}

h3{
margin-bottom:16px;
text-align:center;
font-size:1.5rem;
}
}




/* ビューレターとは　スタイル　*/


#about {
padding-top:30px;
}


.aboutviewletter{
list-style:none;
width:360px;
margin:0 auto;
padding:100px 24px;
background-color:rgba(255,255,255,0.7);
text-align:center;
}


.text2{
font-size:1rem;
text-align:left;
margin-top:1.5rem;
text-align: justify;
text-justify: inter-ideograph;
}

.text3{
font-size:1rem;
text-align:left;
margin-bottom:1.5rem;
}

.text3b{
font-size:1rem;
text-align:left;
margin-top:1rem;
font-weight:bold;
}

.text4{
font-size:1rem;
text-align:left;
margin-bottom:0.1rem;
}

.etegami{
text-align:left;
width:5rem;
float:left;
}

.aboutviewletter li{
list-style:square;
font-size:1rem;
text-align:left;
}

.aboutviewletter ul{
margin-bottom:40px;
}

.aboutviewletter h2 img{
height:3rem;
}

.aboutviewletter h3{
margin-top:25px;
margin-bottom:16px;
font-size:1.2rem;
font-weight:bold;
}

.aboutviewletterimage{
height:79px;
width:300px;
}



@media screen and (min-width: 768px) {

.aboutviewletter{
list-style:none;
width:650px;
margin:0 auto;
padding:180px 24px;
background-color:rgba(255,255,255,0.7);
text-align:center;
}

.text2{
font-size:1.2rem;
text-align:left;
margin-top:1.5rem;
margin-bottom:1rem;
text-align: justify;
text-justify: inter-ideograph;
}

.text3{
font-size:1.2rem;
text-align:left;
margin-top:1.5rem;
margin-bottom:1.5rem;
}

.text3b{
font-size:1.2rem;
text-align:left;
margin-top:1rem;
font-weight:bold;
}

.text4{
font-size:1.2rem;
text-align:left;
margin-bottom:-200px;
}

.etegami{
width:10rem;
text-align:left;
float:left;
}


.aboutviewletter li{
list-style:square;
font-weight:bold;
font-size:1.2rem;
margin-bottom:1rem;
text-align:left;
}

.aboutviewletter ul{
margin-bottom:50px;
}

.aboutviewletter h2 img{
margin-top;30px;
height:4rem;
}

.aboutviewletter h3{
margin-bottom:2rem;
margin-top:2rem;
font-size:1.5rem;
font-weight:bold;
}

.aboutviewletterimage{
height:158px;
width:600px;
}

}




@media screen and (min-width: 950px) {
.aboutviewletter{
list-style:none;
width:1000px;
margin:0 auto;
padding:300px 0px;
background-color:rgba(255,255,255,0.7);
text-align:center;
}

.text2{
font-size:1.5rem;
text-align:left;
margin-top:2rem;
text-align: justify;
text-justify: inter-ideograph;
}

.text3{
font-size:1.5rem;
text-align:left;
}

.text3b{
font-size:1.5rem;
text-align:left;
font-weight:bold;
}

.text4{
font-size:1.5rem;
text-align:left;
margin-bottom:-200px;
}

.etegami{
text-align:left;
width:15rem;
float:left;
}


.aboutviewletter li{
list-style:square;
font-size:1.5rem;
margin-bottom:1rem;
text-align:left;
}

.aboutviewletter ul{
margin-bottom:50px;
}

.aboutviewletter h2 img{
margin-top;30px;
height:4rem;
}

.aboutviewletter h3{
margin-top:60px;
margin-bottom:30px;
font-size:1.5rem;
font-weight:bold;
}


.aboutviewletterimage{
height:211px;
width:800px;
}
}













/* 広告について　スタイル　*/

#koukoku {
padding-top:120px;
}


.bg2{
margin-bottom:24px;
background-size:cover;
padding:24px 0;
}

.viewletterkoukoku{
list-style:none;
width:360px;
margin:0 auto;
padding:8px 24px;
background-color:rgba(255,255,255,0.7);
text-align:center;
}

.viewletterkoukoku li{
list-style:square;
font-size:1rem;
text-align:left;
margin-bottom:20px;
}

.viewletterkoukoku ul{
margin-bottom:40px;
}

.viewletterkoukoku h2 img{
height:3rem;
}


.viewletterkoukoku h3{
margin-top:30px;
font-size:1.1rem;
font-weight:bold;
}


.viewletterkoukoku img{
margin-bottom:1rem;
}

.imagesize{
width: 300px;
height:427px;
}


@media screen and (min-width: 768px) {


#koukoku {
padding-top: 250px;
}


.viewletterkoukoku{
list-style:none;
width:650px;
margin:0 auto;
padding:8px 24px;
background-color:rgba(255,255,255,0.7);
text-align:center;
}

.viewletterkoukoku li{
list-style:square;
font-size:1rem;
text-align:left;
margin-bottom:20px;
}

.viewletterkoukoku ul{
margin-bottom:40px;
}

.viewletterkoukoku h2 img{
height:4rem;
}


.viewletterkoukoku h3{
margin-top:30px;
font-size:1.1rem;
font-weight:bold;
}


.viewletterkoukoku img{
margin-bottom:1rem;
}
}




@media screen and (min-width: 950px) {

#koukoku {
padding-top:250px;
}


.viewletterkoukoku{
list-style:none;
width:1000px;
margin:0 auto;
padding:8px 24px;
background-color:rgba(255,255,255,0.7);
text-align:center;
}

.viewletterkoukoku li{
list-style:square;
font-size:1.2rem;
text-align:left;
margin-bottom:20px;
}

.viewletterkoukoku ul{
margin-bottom:40px;
margin-top:40px;
}

.viewletterkoukoku h2 img{
height:4rem;
}


.viewletterkoukoku h3{
margin-top:30px;
font-size:1.5rem;
font-weight:bold;
}


.viewletterkoukoku img{
margin-bottom:1rem;
}}






/* 実績について　スタイル　*/

#jisseki {
padding-top: 30px;
}


.viewletterjisseki{
list-style:none;
width:360px;
margin:0 auto;
padding:8px 24px;
background-color:rgba(255,255,255,0.7);
text-align:center;
}

.viewletterjisseki h2 img{
height:3rem;
}

.viewletterjisseki h3{
margin-top:30px;
font-size:1.1rem;
font-weight:bold;
}

.viewletterjisseki img{
height:15rem;
margin-bottom:1rem;
}




@media screen and (min-width: 768px) {

#jisseki {
padding-top: 250px;
}


.viewletterjisseki{
list-style:none;
width:650px;
margin:0 auto;
padding:8px 24px;
background-color:rgba(255,255,255,0.7);
}

.viewletterjisseki h2 img{
height:4rem;
text-align:center;
}

.viewletterjisseki h3{
margin-top:30px;
font-size:1.1rem;
font-weight:bold;
}

.viewletterjisseki img{
height:25rem;
margin-bottom:1rem;
float:left;
margin-left:0.5rem;
margin-right:0.5rem;
}
}



@media screen and (min-width: 950px) {

#jisseki {
padding-top: 250px;
}


.viewletterjisseki{
list-style:none;
width:1000px;
margin:0 auto;
padding:8px 24px;
background-color:rgba(255,255,255,0.7);
}

.viewletterjisseki h2 img{
height:4rem;
text-align:center;
}

.viewletterjisseki h3{
margin-top:30px;
font-size:1.1rem;
font-weight:bold;
}

.viewletterjisseki img{
height:30rem;
margin-bottom:1rem;
margin-left:3rem;
margin-right:3rem;
float:left;
}
}
















/* フッター　スタイル　*/

.footerinfo{
height:60vh;
background:url(../images/footer_bg.jpg) no-repeat center center #fdd;
background-size:cover;
display:flex;
justify-content:center;
text-align:center;
align-items:center;
}

.footerinfotext{
width:360px;
padding:16px;
}


.footerinfo h2{
margin-top:30px;
font-size:1rem;
font-weight:bold;
}

.footerinfo li{
list-style:none;
font-size:0.9rem;
}


.footerimg{
margin:10px;
width:3rem;
height:3rem;
}


.copyright{
text-align:center;
font-size:0.75rem;
}


.mawarikomikaijyo {
clear: both;
}




@media screen and (min-width: 768px) {

.footerinfo{
height:60vh;
background:url(../images/footer_bg.jpg) no-repeat center center #fdd;
background-size:cover;
display:flex;
text-align:center;
justify-content:center;
align-items:center;
}

.footerinfotext{
width:400px;
padding:16px;
}


.footerinfo h2{
margin-top:30px;
font-size:1.1rem;
font-weight:bold;
}


.footerinfo li{
list-style:none;
font-size:1rem;
text-align: justify;
text-justify: inter-ideograph;
}


.footerinfo ul{
text-align:center;

}

.footerimg{
margin:20px;
width:5rem;
height:5rem;
}

.copyright{
text-align:center;
font-size:1rem;
}

.mawarikomikaijyo {
clear: both;
}

}


@media screen and (min-width: 950px) {

.footerimg{
margin:20px;
width:5rem;
height:5rem;
}

.mawarikomikaijyo {
clear: both;
}
}