@charset "utf-8";
/* CSS Document */


main h1{
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    max-width: 1000px;
    color: #333;
}
main .txt{
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    padding: 1rem;
    margin-right: auto;
    background-color: #FFF6EF;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    border-radius: 5px;
    margin-bottom: 3rem;
}
main h2{
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    max-width: 1000px;
    color: #333;
}

.content{	
	display: grid;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
	max-width: 1000px;
    /*min-height: 100vh;*/
	grid-template-columns: 33% 33% 33%;
    grid-template-rows: max-content max-content max-content max-content max-content max-content;
	grid-gap:0.5rem 0.5rem; 
    grid-template-areas:
		"a1  b1  a3"
		"a2  b2  b3"
		"c3  d1  d3"
		"c1  c2  d2"
		"e1  e1  e1"
		; 
}
@media (max-width:1030px) {
	.content{	
		grid-template-columns: 1fr 1fr;
		grid-template-rows: max-content max-content max-content max-content max-content max-content max-content;
		grid-gap: 1rem 1rem; 
		grid-template-areas:
			"a1  b1"
			"a2  b2"
			"c3  d1"
			"c1  c2"
			"a3  b3"
			"d3  d2"
			"e1  e1"
			; 
	}
}
@media (max-width:700px) {
	.content{	
		grid-template-columns: 1fr;
		grid-template-rows: max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content;
		grid-gap: 1rem 1rem; 
		grid-template-areas:
			"a1"
			"b1"				
			"a2"
			"b2"
			"b3"
			"c3"
			"d1"
			"a3"
			"c1"
			"c2"
			"d3"
			"d2"
			"e1"
			; 
	}
}
.content div{
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(270deg,rgba(244,252,255,1.00) 0%,rgba(238,250,255,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(244,252,255,1.00) 0%,rgba(238,250,255,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(244,252,255,1.00) 0%,rgba(238,250,255,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(244,252,255,1.00) 0%,rgba(238,250,255,1.00) 100%);
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-size: 1rem;
    color: #333;
    text-align: center;
    place-content: center;
    place-items: center;
}
.content div p{
    font-size: 0.6rem;
    line-height: 0;
}


select{
    appearance: none;/*ブラウザのスタイルをリセット*/
    width: 300px;/*セレクトボックスの横幅*/
    padding: 15px;
    color: #555555;/*テキストの色*/
    border: 1px solid #219BC7;/*枠線の太さ・形状・色*/
    border-radius: 3px;/*枠線の角丸*/
    background-color: #fff;/*背景色*/
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.<path fill="%2374C0FC" d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM135 241c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l87 87 87-87c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 345c-9.4 9.4-24.6 9.4-33.9 0L135 241z"/></svg>');/*背景にFont AwesomeのSVGを指定*/
    background-size: 16px 16px;/*背景のサイズ*/
    background-repeat: no-repeat;/*背景の繰り返し*/
    background-position: top 15px right 15px;/*背景の表示位置*/
    cursor: pointer;/*マウスカーソルをポインターに*/
    margin-top: 0.5rem;
    font-size: 1.1rem;
}
select:focus{
  outline: none;/*focus時の枠線を消去*/
}
@media (max-width:1030px) {
	select{
		width: 100%;
		font-size: 1.2rem;
	}
}
@media (max-width:700px) {
	select{
    width: 100%;
    font-size: 1.2rem;
	}
}

#a1 {
    grid-area: a1;

}
#a2 {
    grid-area: a2;

}
#a3 {
    grid-area: a3;

}

#b1 {
    grid-area: b1;

}
#b2 {
    grid-area: b2;

}
#b3 {
    grid-area: b3;

}

#c1 {
    grid-area: c1;

}
#c2 {
    grid-area: c2;

}
#c3 {
    grid-area: c3;

}
#d1 {
    grid-area: d1;

}
#d2 {
    grid-area: d2;
}
#d2 a{
    color: #333;
    text-decoration: none;
}
#d2 a:hover{
    color: #333;
    text-decoration: underline;
}
#d3 {
    grid-area: d3;

}
#e1 {
    grid-area: e1;

}
#e1 a{
    color: #333;
    text-decoration: none;
}
#e1 a:hover{
    color: #333;
    text-decoration: underline;
}