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

/* -------------------------------
 絞り込み検索周りのスタイリング
（レスポンシブもこのファイルに記入）
------------------------------- */

select, button, input{
	margin:0;
	padding:0;
	background: #fff;/*要確認*/
	color: #333;
	font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 100%;
	font-weight: 700;
	text-align: center;
	line-height: 1;
}

/* --------------------------------------------
 2024.6.24 メインビジュアルと検索窓の並びを変更
-------------------------------------------- */
.KeyVisual_search_flex{
    display: flex; flex-direction: column;
}
.KeyVisual_search_flex .search_window_flex{
    margin-bottom: 0;
}

.KeyVisual_search_flex .search_lead{
    margin-bottom: 8px;
}

@media screen and (min-width:800px){
    .KeyVisual_search_flex{
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        column-gap: 6rem;
    }
    .KeyVisual_search_flex .search_window_flex{
        flex-direction: column;
    }

    .KeyVisual_search_flex .keyVisual,.KeyVisual_search_flex .search_window_flex{
        margin: 0;
    }
    .KeyVisual_search_flex .search_window_flex button{
        max-width: 100%;
    }
}


/* -------------------------------
 検索窓
------------------------------- */
.center-parent{
	position: relative;
}
.search_lead{
	margin: 0 auto 16px;
	max-width: 320px;
	position: relative;
	padding: 0 0.5rem;
	font-size: 0.75rem;/*12px*/
	text-align: center;
	font-weight: 700;
}

.search_lead::before,
.search_lead::after {
    position: absolute;
    top: 2px;
    height: 1rem;
    content: '';
}

.search_lead::before {
    border-left: double 3px #3371D6;
    left: 0;
    transform: rotate(-30deg);
}

.search_lead::after {
    border-right: double 3px #3371D6;
    right: 0;
    transform: rotate(30deg);
}

.search_window_wrap{
	margin: 0 auto;
	max-width:448px;	
	display: flex;
	justify-content: space-between;
	column-gap: 20px;
	flex-direction: column;/*幅広デバイスでrow横並びに切り替え*/
}
				
.search_window {
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.search_window select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.search_window select::-ms-expand {
    display: none;
}
.search_window.windowDesign_a {
  position: relative;
  border-radius: 4px;
  border: 2px solid #211A75;
  background: #ffffff;
  margin-bottom: 1rem;
  color: #ccc;
}

.search_window.windowDesign_a select {
/* padding: 8px 38px 8px 8px;*/
	text-align: center;
	padding: 6px;
	font-size: 0.875rem;/*14px*/
	line-height: 1;
}


/*プルダウンメニュー*/
.search_window_flex{
	display: flex; 
	margin: 0 auto 16px;
	max-width: 820px;/*2列なら448px*/
	flex-direction: column; 
	gap:8px; 
	align-items: center;
	justify-content: center;
}
/** Custom Select **/
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
	width: 100%;
	max-width: 448px;
}
  .custom-select-wrapper select {
    display: none;
  }
  .custom-select {
    position: relative;
    display: inline-block;
	  width: 100%;
  }
    .custom-select-trigger {
      position: relative;
      display: block;
      font-size: 1rem;/*2024.6.19変更 変更前は0.875rem;*/
      font-weight: 700;
      color: #333;
      background: #fff;
	  border: 2px solid #211A75;
      border-radius: 4px;
      cursor: pointer;	
	/*text-align: center;*/
    text-align: left;/*2024.6.21変更*/
	padding: 6px;
	line-height: 1.5;
    }
      .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
		  top:50%;
		  right: 8px;
		  width: 0;
		  height: 0;
		  padding: 0;
		  content: '';
		  border-left: 6px solid transparent;
		  border-right: 6px solid transparent;
		  border-top: 6px solid #211A75;
        transform: rotate(0deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
      }

    .custom-select-trigger:hover {
		color: rgba(0,0,0,0.5);		
}



      .custom-select.opened .custom-select-trigger:after {
        margin-top: 1.5px;
        transform: rotate(-180deg) translateY(0%);
      }
  .custom-options {
	text-align: left;/*2024.6.21center*/
    position: absolute;
    display: block;
    top: 100%; left: 0; right: 0;
    min-width: 100%;
    margin: 6px 0;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #D8EDF8;
    transition: all .4s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
  }
	.select_area .custom-options{
		z-index: 3;
	}

	.select_genre .custom-options{
		z-index: 2;
	}
  .custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
    word-break: break-all;/*2024.6.21*/
  }
    .custom-options:before {
      position: absolute;
      display: block;
      content: '';
      bottom: 100%; left: 50%;
      width: 7px; height: 7px;
      margin-bottom: -7px;
      border-top: 1px solid #D8EDF8;
      border-left: 1px solid #D8EDF8;
      background: #D8EDF8;
      transform: rotate(45deg) translateX(-50%);
      transition: all .4s ease-in-out;
    }
    .option-hover:before {
      background: #f9f9f9;
    }
    .custom-option {
      position: relative;
      display: block;
      /*padding: 0 22px;*//*2024.6.21*/
      padding: 0.5rem;/*2024.6.21*/
      border-bottom: 2px dashed #211A75;
      font-size: 0.875rem;/*14px*/
      font-weight: 600;
      color: #333;
      /*line-height: 3rem;*//*2024.6.21*/
      min-height: 2rem;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
    .custom-option:first-of-type {
      border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
      border-bottom: 0;
      border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
      background: #211A75;
	  color: #fff;
    }

/*参考*/
.search_window02{
	border: #211A75 2px solid;
	border-radius: 4px;
	margin-bottom: 1rem;
}
.search_window02:last-of-type{
	margin-bottom: 0;
}


.search_window02 p{
	text-align: center;
	color: #ccc;
	padding: 8px 0;
}

.menu_list{
	background: #D8EDF8;
}
.menu_list li{
	text-align: center;
	border-bottom: #211A75 2px dashed;
	height: 55px;
}
.menu_list li:last-child{
	border: none;
}
.menu_list li a{
	display: block;
	width: 100%;
	height: 55px;
}
				
/*　キーワード検索の入力欄　*/

input[type="text"]{
    display: block;
    width: 100%;
    max-width: 448px;
    font-size: 1rem;/*2024.6.19変更 変更前は0.875rem*/
    font-weight: 700;
    color: #333;
    background: #fff;
    border: 2px solid #211A75;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    padding: 6px;
    line-height: 1.5;
    }
    /*プレースホルダー*/
    ::placeholder{/* 標準の記述 */
        color: #aaaaaa;
    }
    :-ms-input-placeholder {/* ▼IE10・IE11用 */
       color: #aaaaaa;
    }
    ::-webkit-input-placeholder {/* ▼Chrome・Safari・Opera用(※1：Edgeでも有効) */
       color: #aaaaaa;
    }
    :-moz-placeholder {/* ▼Firefox18以前用(※2) */
       color: #aaaaaa;
    }
    ::-moz-placeholder {/* ▼Firefox19以上用(※3) */
       color: #aaaaaa; opacity: 1;
    }

    /*フォーカス*/
input:focus-visible {
          background-color: #D8EDF8;
          outline: none;
        }


/*「検索」ボタンの設定*/
button{
	display: block;
	width: 100%;/*検討中*/
	max-width:448px;
	margin: 0 auto;
	padding: 6px;
	line-height: 1.5;
	font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size:  1rem;/*2024.6.19変更 変更前は14px 0.875rem;*/
	font-weight: 700px;
	color: #fff;
	background: #211A75;
	border: 2px solid #211A75;
  	border-radius: 4px;
	cursor: pointer;
	transition: background .2s ease;
}

button:hover{
	color: #211A75;
	background: #D8EDF8;
}

.icon_svg_wrap svg{
	width: 0.875rem;
	vertical-align: -2px;
	fill:#ffffff;
}
button:hover .icon_svg_wrap svg{
	fill:#211A75;
}


.search_result{
	max-width: 480px;
	font-size: 0.75rem;
    margin: 16px auto;/*2024.6.21*/
	padding: 0 2em;
}
.search_result_number{
    vertical-align: -2px;
    font-weight: bold; 
    font-size: 1.75rem; 
    color: #211A75;
    margin-right: 4px;
}
@media screen and (min-width:769px){
.search_result{
	max-width: 1280px;
    font-size: 0.975rem;/*2024.6.14 0.75rem→0.975rem*/    
    text-align: center;/*2024.6.14*/
}
.search_result_number{
    font-size: 2rem; 
}
    
}

@media screen and (min-width:800px){
.search_window_flex{
	flex-direction: row;
	column-gap: 8px;
	}
button{
	max-width:6rem;
}
    
.search_result{
    margin: 32px auto;/*2024.6.21*/
}
    
}

@media screen and (min-width:1281px){
.search_lead{
	margin: 0 auto 18px;
	padding: 0 1rem;
	font-size: 0.875rem;/*14px*/
}	

}