@charset "utf-8";
/*===============================================================//
// ユーザページ                                                  //
// 概要：ユーザページの基本スタイル                              //
// 作成者：k.moriguchi                                           //
// 作成日：2010/10/13                                            //
// 更新履歴：                                                    //
//===============================================================*/


/* --------------------------------

	基本スタイル

-----------------------------------

	1. 基本レイアウト・デザイン
	2. ヘッダー
	3. メイン画像
	4. ヘッドラインニュース
	5. コンテンツ
	6. フッター

--------------------------------- */



/* ========================================================================



	1. 基本レイアウト・デザイン


 
======================================================================== */


#container{
	margin:0 auto;
	padding:0;
	text-align:center;
	/* width:1024px; */
	width:100%;
	
}

#wrap{
	margin:0 auto;
	padding:0;
	text-align:center;
	/* width:975px; */
	width:100%;
	min-height: 100vh;
}

.main{
	clear:left; 
	text-align:left;
	/* width:975px; */
	width:100%;
	padding-inline: 1.25rem;
}

.main.main-search {
	padding-inline: 0;
}

.main table#table-01{
	clear:left; 
	background-color:#FFF;
	margin:0;
	padding:0;
	text-align:left;
}

.main table#table-01{
	border-collapse: collapse;
	border-spacing: 0;
	margin:0;
	padding:0;
	border: 1px #E3E3E3 solid;
}

.main table#table-01 th{
	padding: 0 0 0 5px;
	text-align: left;
	/* color:#1a4652; */
	color:var(--font-color);
	border: var(--border-color-primary) solid;
	border-width: 0 0 1px 1px;
	background: #F5F5F5;
}

.main table#table-01 td{
	padding:0px;
	text-align: left;
	word-break: break-all;
	border: var(--border-color-primary) solid;
	border-width: 0 0 1px 1px;
}

.main a{
	color: var(--link-color);
	text-decoration: underline;
	
}
.main a:link {
	color: var(--link-color);
}

.main a:visted {
	color: var(--link-color);
}

.main a:hover {
	color: var(--link-color);
	text-decoration:none;
}

.main a:active {
	color: var(--link-color);
}

/* オートコンプリート用テキストボックス背景色指定追加　by高橋(2010/12/01) */

.main_box input.autoc {
	background-color:#ccffff;

}

/* ========================================================================



	2. ヘッダー


 
======================================================================== */

/* サイト内検索 
----------------------------------------------------------- */ 

#searchform{  
	width: 100%;  
	background: none;   
	display: block;  
	height: 2rem;  
	position: relative;  
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	column-gap: 1rem;
	padding-inline: 2rem;
}

#keywords{  
	width: 60%;
	height: 100%;
	/* position: absolute;  
	top: 1px;  
	left: 12px;   */
	border-radius: 0.25rem;
	flex:1;
}  

#searchBtn{  
	/* position: absolute;  
	left: 210px;   */
	position: static;
}

input[type="text"] {
	border: 1px solid var(--border-color-secondary);
}

input.search{   
	color: var(--font-color-secondary);  
	padding-top: 1px;  
	width: 230px;  
}

input.serch_button:link{
	background-image:url(../../images/site/search_button.gif);
	background-repeat:no-repeat;
	width:48px;
	height:25px;
}

input.search_button:hover{
	background-image:url(../../images/site/search_button_over.gif);
	background-repeat:no-repeat;
	width:48px;
	height:25px;
}

input.search_button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30%;
	max-width: 140px;
	height: 100%;
	border: none;
	background-color: var(--accent);
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
}

/* ========================================================================



	5. コンテンツ


 
======================================================================== */
.menu_top{
	background-image: url(../../../images/site/menu_top_bk.gif);
	background-repeat: no-repeat;
	/* width:771px; */
	width:100%;
	height:43px;
	text-align:left;

}

.menu_top h3{
	margin:0;
	padding:13px 0 0 29px;
	font-size:20px;
	font-weight:bold;
	color:var(--accent);
}

.menu_top p.title{
	margin:0;
	padding:11px 0 0 10px;
	color:#FFF;
}

.menu_top_02{
	background-image: url(../../../images/site/menu_top_bk_02.gif);
	background-repeat: no-repeat;
	width:981px;
	height:64px;
	text-align:left;

}

.menu_top_02 h3{
	margin:0;
	padding:13px 0 0 29px;
	font-size:20px;
	font-weight:bold;
	color:var(--accent);
}

.menu_top_02 p.title{
	margin:0;
	padding:11px 0 0 10px;
	color:#FFF;
}

/* ========================================================================



	登録馬情報


 
======================================================================== */

/* .renkei_m_search{
	padding-inline: 1rem;
} */

.renkei_m_search  h4 + * {
	padding-top:1rem;
}

.renkei_m_search details {
  display: flex;
  padding-bottom: 2rem;
}

.renkei_m_search details summary {
  display: block;
  cursor: pointer;
  position: relative;
	font-size: clamp(1rem, 2.5vw, 2rem);
	border: 1px solid var(--border-color-secondary);
	padding-block: 1rem;
	padding-left: 1rem;
	background-color: var(--bg-color-secondary);
}

.renkei_m_search details summary::-webkit-details-marker {
  display: none;
}

.renkei_m_search details[open] summary {
  /* border-bottom: 1px solid #aaa; */
}

.renkei_m_search details summary::before,
.renkei_m_search details summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: var(--font-color);
  width: 16px;
  height: 3px;
}

.renkei_m_search details summary::after {
  transform: rotate(90deg);
}

.renkei_m_search details summary::before {
  animation: closing-before 0.3s ease-in;
}

.renkei_m_search details summary::after {
  animation: closing-after 0.3s ease-in;
}

.renkei_m_search details .details-content {
	padding: 1rem;
	border: 1px solid #ddd;
	border-top: none;
}

.renkei_m_search details .details-content input{
	padding-block: 0.5rem;
	width: 100%;
	/* height:40px; */
	height:3rem;
	font-size:1rem;
}

.renkei_m_search details .details-content input::placeholder {
	padding-left: 0.5rem;
}

.renkei_m_search details .details-content input.dateISO{
	width: clamp(120px, 33%, 33%);
	font-size:1rem;
}

.renkei_m_search details .details-content select {
	height: 2.5rem;
	appearance: none;
	min-width: 230px;
	height: 2.8em;
	padding: .4em calc(.8em + 30px) .4em .8em;
	border: 1px solid var(--border-color-secondary);
	border-radius: 3px;
	background-color: #fff;
	cursor: pointer;
}

.renkei_m_search details .details-content .selectbox {
	display: inline-flex;
	align-items: center;
	position: relative;
}

.renkei_m_search details .details-content .selectbox::after {
	position: absolute;
	right: 15px;
	width: 10px;
	height: 7px;
	background-color: var(--font-color);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
	pointer-events: none;
}

@keyframes closing-before {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes closing-after {
  0% {
    transform: rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: rotate(90deg);
    opacity: 1;
  }
}

.renkei_m_search details[open] summary::before {
  animation: opening-before 0.3s ease-in forwards;
}

.renkei_m_search details[open] summary::after {
  animation: opening-after 0.3s ease-in forwards;
}

@keyframes opening-before {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes opening-after {
  0% {
    transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: rotate(180deg);
    opacity: 0;
  }
}

.save_button{
	margin: 0 auto 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn.search_button {
	width: 50%;
	max-width: 300px;
	border-radius: 9999px;
	border: none;
	background-color: var(--accent);
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	font-weight: bold;
	padding-block: 0.5rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

input[name="savesubmit"] {
	width: 1px;
	height: 1px;
}

/* ========================================================================



	登録馬詳細


 
======================================================================== */
.main.main-detail form  {
	margin-top: 1rem;
	font-size: large;
}

.main.main-detail form table {
	width: 100%;
}

.main.main-detail form table .horse-name {
	padding: .5rem;	
	display: inline-block;
	width: 100%;
}

.main.main-detail form table .horse-name font {
	line-height: 2;
}

.main.main-detail form table .horse-name + tr {
	margin-top: 1rem;
}


.main.main-detail td button{
	width: 50%;
	max-width: 300px;
	border-radius: 9999px;
	border: none;
	background-color: var(--accent);
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	font-weight: bold;
	padding-block: 0.5rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.main.main-detail table td table td table td{
	padding: 0.5rem;
	line-height: 1.5;
	word-break: break-all;
}

.main.main-detail .list_button{
	margin-top: 1rem;
}
/* ========================================================================



	登録馬情報


 
======================================================================== */
.main.main-table form table {
	width: 100%;
}

.main.main-table form table .horse-name {
	padding: .5rem;	
	display: inline-block;
	width: 100%;
}

.main.main-table form table .horse-name font {
	line-height: 2;
}

.main.main-table form table .horse-name + tr {
	margin-top: 1rem;
}


.main.main-table td button{
	width: 50%;
	max-width: 300px;
	border-radius: 9999px;
	border: none;
	background-color: var(--accent);
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	font-weight: bold;
	padding-block: 0.5rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.main.main-table .list_button{
	margin-top: 2rem;
}

/* 三代血統 */
.main.main-pedigree form table {
	width: 100%;
}

.main.main-pedigree form table .horse-name {
	padding: .5rem;	
	display: inline-block;
	width: 100%;
}

.main.main-pedigree form table .horse-name font {
	line-height: 2;
}

.main.main-pedigree table:first-of-type{
	margin-bottom: 1rem;
}

.main.main-pedigree td button{
	width: 50%;
	max-width: 300px;
	border-radius: 9999px;
	border: none;
	background-color: var(--accent);
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	font-weight: bold;
	padding-block: 0.5rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.main.main-pedigree .list_button{
	margin-top: 2rem;
}

.main .scroll-hint-icon{
	width: 130px !important;
	height: 90px !important;
	top: 50%;
	left: 50%;
	padding: 20px 10px 10px 10px;
	transform: translate(-50%,-50%);
}

.main .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
	z-index: 9999!important;
}

@media (max-width: 320px) {
	.btn.search_button,
	.main.main-detail td button,
	.main.main-table td button,
	.main.main-pedigree td button{
		width: 80%;
	}
}

/* ========================================================================



	utility


 
======================================================================== */
.flex {
	display: flex;
}

.flex-wrap{
	flex-wrap: wrap;
}

.items-center{
	align-items: center;
}

.flex-col {
	flex-direction: column;
}

.gap-4{
	gap: 1rem;
}

.row-gap-2 {
	row-gap: 0.5rem;
}

.p-2 {
	padding: 0.5rem;
}

.px-2 {
	padding-inline: 0.5rem;
}

.pb-0{
	padding-bottom: 0 !important;
}

.mb-4{
	margin-bottom: 1rem;
}

.w-full {
	width: 100%;
}

.w-fit {
	width: fit-content;
}

.w-10 {
	width: 10rem;
}

.inline-block{
	display: inline-block;
}

.relative {
	position: relative;
}