@charset "UTF-8";

*{box-sizing: border-box;}

/*マウス*/
a {
opacity: 1;
transition: 0.5s;
}

a:hover {
opacity: 0.6;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
pc用
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝==*/
@media only screen and (min-width: 601px) {

body {
color: #333; 
}


header {
position: relative; /*基準位置にする*/
margin-bottom: 100px;
width: 100%;
}

header .img02 {
position: absolute;
width: 150px;
height: 150px;
bottom: -75px; /*半分下にはみ出すからマイナス*/
left: calc(50% - 75px); /*左右の位置*/
}

.img01 img {
width: 100%;
height: 200px;
object-fit: cover;
}
    
.img02 img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}

.profile {
box-shadow: 0 3px 3px 0 rgb(175 175 175 / 16%);
text-align: center;
padding-bottom: 25px;
margin-bottom: 50px;
}

h1 {
font-size: 25px;
padding: 0;
margin: 0 auto;
}

.profile p {
font-size: 15px;
line-height: 1.8;
margin:10px auto;
}

ul {
margin: 0;
padding: 0;
padding-bottom: 60px;
display: flex;
gap: 25px;
justify-content: center;
list-style: none;
width: 300px;
margin: auto;
} 

li {
width: 50%;
height: 50%;
}

main article {
display: flex;
flex-wrap: wrap;
gap: 30px;
max-width: 840px;
margin: auto;
justify-content: center;
}

main article::after {
content: "";
display: block;
width: 250px;
}

main section {
width: 250px;
margin-bottom: 30px;
}

main section a {
color: #333;
text-decoration: none;  
}

main section img {
width: 250px;
height: auto;
object-fit: cover;
}

h2 {
font-size: 15px;
text-align: left;
}

a {
  margin: 0 auto;
}

.to_link {
  border-radius: 40px;
  background-color: rgb(230, 230, 230);
  padding: 15px 125px;
  text-decoration: none;
  font-weight: 520;
  color: #000000b9;
  font-size: 20px;
}

footer {
background: #7084a9;
color: #ffffff;
padding-top: 21px;
height: 40px;
}

footer p {
font-size: 14px;
margin: 0 auto;
text-align: center;
}

.batsu{
  font-size: 25px;
}

}























































































/*=======================================
sp用
=======================================*/
@media only screen and (max-width: 600px) {

body {
color: #333; 
}
        
/*-----------------------------------------
positionを使ってみよう！⑦
------------------------------------------*/

        
header {
position: relative; /*基準位置にする*/
margin-bottom: 20px;
width: 100%;
}
        
header .img02 {
position: absolute; /*1相対位置にする*/
width: 100px; /*2幅指定する*/
height: 100px;
bottom: -50px; /*3場所指定する/半分はみだすから50  はみ出す方向下やからマイナス*/
/* calcについて調べる⑧*/
left: calc(50%- 50px); /*4写真の位置指定/左右の位置*/
}

.img01 img {
width: 100%;
height: 150px;
object-fit: cover;
}
                        
.img02 img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}

.profile {
box-shadow: 0 3px 3px 0 rgb(175 175 175 / 16%);/***************** 追加⑨　　*/
text-align: left;
margin-bottom: 30px;
margin-top: 60px;
}
        
h1 {
font-size: 23px;
margin-top: 20px;
}
        
.profile p {
font-size: 16px;
line-height: 1.8; /********************追加①⓪ 　 */
}
        
ul {/*＊＊＊＊＊＊＊＊＊＊＊＊ulにはmarginとpaddingの初期値があるのでリセット①①  */
margin: 0;  /*追加*/
padding: 0; /*追加*/
padding-bottom: 40px; /*追加*/
display: flex;
gap: 25px; /*追加*/
justify-content: flex-start;
list-style: none;
/* text-align: center; 変更 */
} 
        
li {
/* margin: 0 10px;変更①② */
width: 20%; /*追加*/
height: 20%; /*追加*/
list-style: none;
}
        
main {
width: 89%;
margin: auto;
justify-content: center; /*追加*/
}
        
/************************** 追加タグ①④   */
main article::after {
content: "";
display: block;
width: 250px;
/*****************************************/
}
        
main section {
width: 100%;
margin-bottom: 20px;
}
        
/***************************追加タグ①⑤  */
main section a {
color: #333;
text-decoration: none;  
/****************************************/
}
        
main section img {
width: 100%;
height: auto;   /*追加*/
object-fit: cover;  /*追加*/
}

h2 {
font-size: 15px;
text-align: left;
}


.to_link {
  border-radius: 40px;
  background-color: rgb(230, 230, 230);
  padding: 15px 30px;
  text-decoration: none;
  font-weight: 520;
  color: #000000b9;
  font-size: 20px;
}

        
footer {
background: #7084a9;
color: #ffffff;
padding-top: 21px;
margin: 0;
margin-top: 40px;
}
        
footer p {
font-size: 14px;
margin: 0 auto;
text-align: center;
}
        
}