@charset "utf-8";
* {
  box-sizing: border-box;
  vertical-align: baseline;
  word-break: break-all;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, hr, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea, button, figure {
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
}
body {
  font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  color: var(--color-base);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  background-color: var(--color-base);
  margin: 0 auto;
  padding: 0;
}
ol, ul, li {
  list-style: none;
}
a, a:link {
  display: block;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  image-rendering: -webkit-optimize-contrast;
}
a img {
  border: none;
  vertical-align: top;
}

header {
	max-width:900px;
	margin: 0 auto;
	position: relative;
	height: auto;
}

header {
	background: url(../img/sample.jpg) ;
}

h2 {
  font-size: 21px;
  margin-bottom: 15px;
}

h3 {
	font-size:22px;
	background:#3a76d4;
	margin-top:5%;
	padding:1% 1% 1% 3%;
	border-radius: 15px;
	text-align: left;
}

main{
	max-width:900px;
	margin:0 auto;
}

.top-title  {
  width: 100%;
  height: auto;
  text-align: center;
  margin: 0 auto;
}

img {width:100%;}


.property-outline {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.property-image img {
  width: 150px;
}
.property-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.property-info li {
  display: flex;
}
.property-info li p {
  width: 60px;
}

/* フッター */
footer {
  color: var(--color-white);
  text-align: center;
  padding: 30px 0 30px;
  background:#33343f;
  margin-top:8%;
}

footer span {font-size:13px;}

footer span a {
	color:#fff;
}


/*ボタン*/
 .buttons_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* ボタン間の余白 */
}

/* 各ボタンブロックのスタイル */
.action_btn {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    align-items: center;
    text-align: center;
}

/* 見出しのスタイル */
.action_btn p {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: bold;
	color:#000;
}

/* ボタンのデザイン */
.button {
    position: relative; /* 矢印を配置するために必要 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c4413d;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
	width:330px;
    padding: 7% 0%; /* 余白を広げる */
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
}

/* 矢印のスタイル */
.arrow {
    position: absolute;
    right: 20px; /* ボタン内の右端に配置 */
    font-size: 22px;
}

/* ホバー時のスタイル */
.button:hover {
    background-color: #a83530;
}


/* ボタン */
.middle_btn {position:absolute; width:40%; top:78%; left:30%;}
.middle_btn:hover{opacity: 0.7;}

/* PC */
@media screen and (max-width: 960px) {

main, header{
	width:98%;
	margin:0 auto;
}


  .property-image img {
    width: 250px;
  }
}

/* sp */
@media screen and (max-width: 414px) {

main, header{
	width:90%;
	margin:0 auto;
}
 
	h3{
		font-size:16px;
		border-radius:10px;
	}	

  .property-image img {
    width: 250px;
  }
	
/* ボタンのデザイン */
	
/* 見出しのスタイル */
.action_btn p {
    margin-bottom: 4px;
}	
	
.button {
    font-size: 20px;
	width:250px;
    padding: 5% 0%; /* 余白を広げる */
}	
	
	
/* ボタン */
.middle_btn {position:absolute; width:60%; top:78%; left:20%;}
.middle_btn:hover{opacity: 0.7;}	
	
}


:root {
  /* Colors */
  --color-base: #ffffff;
  --color-accent-light: #E8EDF1;
  --color-disabled: #B5B9BD;
  --color-white: #FFFFFF;

  /* Paddings */
  --padding-base: 20px;
}