@charset "utf-8";

.container{
    width: 100%;
    margin: 0 auto;
}

.header{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding-top: 3%;
}

.header1{
    width: 25%;
}

.header1 img{
    width: 100%;
    object-fit: cover;
    text-align: center;
    padding-left: 2%;
}

.header2{
    width: 45%;
}

.header2 h1{
    font-size: 30px;
    padding-top: 2%;
    padding-left: 3%;
    text-align: center;
}

.header3{
    width: 30%;
    padding-top: 1%;
}

.td-button {
    position: relative;
    background-color: #ffab3d; /* 背景色 */
    color: white; /* 文字色 */
    padding: 5% 5%; /* パディング */
    text-decoration: none; /* 文字装飾 */
    display: inline-block; /* ボタンの表示方法 */
    font-size: 16px; /* フォントサイズ */
    font-family: Arial, sans-serif; /* フォント */
    margin: 5% 5%; /* 外側の余白 */
    cursor: pointer; /* カーソル */
    border: none; /* ボーダーなし */
    border-radius: 5px; /* ボタンの角丸 */
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); /* 影 */
    transition: transform 0.1s ease-in-out; /* トランジション */
}

.td-button:active {
    transform: translateY(2px); /* 移動 */
}

.top1{
    width: 100%;
}


/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}


/*========= レイアウトのためのCSS ===============*/


ul{
	margin:0;
	padding: 0;
	list-style: none;
}

.title1{
    width: 100%;
    margin: 0 auto;
    padding-top: 5%;
}

.title1 h2{
    text-align: center;
}
.top2{
    width: 100%;
    margin: 0 auto;
    display: flex;
}

.img2{
    width: 50%;
}

.img2 img{
    width: 100%;
    object-fit: cover;
    padding-top: 5%;
}

.p2{
    width: 50%;
    font-size: 26px;
    padding-left: 5%;
    /* 行間をあけるときはline-heightを使う */
    line-height: 200%;
}


.title2{
  width: 100%;
  margin: 0 auto;
  padding-top: 5%;
}

.title2 h2{
  text-align: center;
}


/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
  width: 100%;
  margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 10px;
}

.sort-btn li{
	background:#eee;
	border-radius:10px;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
}

.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	background:#ccc;	
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
	justify-content: space-between;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}	
}

/*＝＝＝のレイアウトのための調整 */

.grid {
  width: 100%;
  margin: 0 auto;
  position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
  width: 30%;/*横並びで3つ表示*/
  display: block;
  position: absolute;
  padding: 20px;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}


/*========= レイアウトのためのCSS ===============*/
ul{
	list-style: none;
}

a{
	color: #333;
}

a:hover,
a:active{
	text-decoration: none;
}


/* ここまで */

.footer{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 10%;
}

.footer p{
  font-size: x-large;
}


.footer button {
  position: relative;
  background-color: #ffab3d; /* 背景色 */
  color: white; /* 文字色 */
  padding: 2% 2%; /* パディング */
  text-decoration: none; /* 文字装飾 */
  display: inline-block; /* ボタンの表示方法 */
  font-size: 16px; /* フォントサイズ */
  font-family: Arial, sans-serif; /* フォント */
  margin: 2% 2%; /* 外側の余白 */
  cursor: pointer; /* カーソル */
  border: none; /* ボーダーなし */
  border-radius: 5px; /* ボタンの角丸 */
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); /* 影 */
  transition: transform 0.1s ease-in-out; /* トランジション */
}

.footer button:active {
  transform: translateY(2px); /* 移動 */
}

.copy{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 5%;
  padding-bottom: 3%;
}