@charset "UTF-8";

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


/*-----------------------------------------------------*/
/*------------------ページタイトル--------------------*/
/*-----------------------------------------------------*/
.p_title{
background-image: url(../img/page_title_img.webp);
background-size: cover;
padding: 60px 0;
background-position: right;
}
@media screen and (max-width: 1300px) {
.p_title{
background-size: cover;
background-position: center top;
}
}
@media screen and (max-width: 768px) {
.p_title{
background-image: url(../img/page_title_img_sp.webp);
padding: 100px 0 60px 0;
}
}

.p_title .content .title01{
margin-top: 30px;
}
.p_title .content p{
  width: min(100%, 600px);
}


/*-----------------------------------------------------*/
/*------------------内容--------------------*/
/*-----------------------------------------------------*/

.ainu-list {
background-color: var(--color-blue-thin);
padding: 30px;
margin-top: 30px;
display: grid;
grid-template-columns: 150px 1fr;
}
@media screen and (max-width: 768px) {
.ainu-list {
padding: 20px;
display:block;
text-align: center;
}
}

.ainu-list .title{
font-size: var(--s20);
background-color:var(--color-blue);
color: var(--color-white);
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
flex-flow: column;
vertical-align: top;
width: 100px;
height: 100px;
}
@media screen and (max-width: 768px) {
.ainu-list .title{
margin: 0 auto 20px auto;
}
}

.ainu_wrap .form{
display: flex;
}
@media screen and (max-width: 768px) {
.ainu_wrap .form{
display:block;
}
}

/* セレクトデザイン */
.ainu_wrap .selectbox {
    display: inline-flex;
    align-items: center;
    position: relative;
}
.ainu_wrap .selectbox::after {/*矢印 */
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
margin-right: 5px;
}
.ainu_wrap .selectbox select {
font-size: var(--s16);
    appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
    font-size:var(--s16);
    cursor: pointer;
margin-right: 10px;
}
@media screen and (max-width: 768px) {
.ainu_wrap .selectbox {
    display:block;
}
.ainu_wrap .selectbox::after {/*矢印 */
margin-top: 20px;
}
.ainu_wrap .selectbox select {
    min-width: 100%;
width: 100%;
margin-right: 0;
}
}

/* ボタン */
.ainu_wrap .form input[type='button'] {
  /* ユーザーエージェントスタイルシートをリセット */
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: inherit;
  appearance: none;
  /* ここからボタンデザイン */
  text-align: center;
  cursor: pointer;
  display: inline-block;
  color: var(--color-black);
  height: 2.8em;
padding: .4em .8em .4em .8em;
  font-size: var(--s16);
 background-color: var(--color-yellow);
}
@media screen and (max-width: 768px) {
.ainu_wrap .form input[type='button'] {
width: 100%;
}
}


/* 結果BOX */
.ainu_wrap .disp{
background-color: var(--color-white);
width: 100%;
padding: 20px;
border-radius: 5px;
margin-top: 20px;
}
@media screen and (max-width: 768px) {
.ainu_wrap .disp{
text-align: left;
}
}



/* 全一覧 */
.ainu-list_wrap{
background-color: var(--color-white);
padding: 40px;
border-radius: 5px;
}
@media screen and (max-width: 768px) {
.ainu-list_wrap{
padding: 20px;
}
}

.ainu-list_wrap .title-list{
background-color: var(--color-gray-light);
font-size: var(--s28);
padding: 7px 20px;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.ainu-list_wrap .title-list{
font-size: var(--s20);
}
}

.ainu-list_wrap .list_template{
column-count: 2;
column-gap: 2em;
column-rule: 1px solid var(--color-gray-light);
margin-bottom: 40px;
}
.ainu-list_wrap .list_template li{
break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}


@media screen and (max-width: 768px) {
.ainu-list_wrap .list_template{
column-count: 1;
text-align: left;
}
}

.ainu-list_wrap .list_template:last-child{
margin-bottom: 0px;
}



/* 写真 */
.ainu .img{
margin-top: 50px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
@media screen and (max-width: 768px) {
.ainu .img{
display:block;
}
.ainu .img img{
margin-bottom: 20px;
}
}