@charset "utf-8";

.main_default {
	max-width: 1100px;
	margin: 0 auto;
}

table {
    width: 100%;
    padding: 0;
    margin: 0;
}

	/*===========================================
    	イベント情報
	===========================================*/
table.event_cont_tbl{
  border-collapse:collapse;
	margin: 20px 0 30px 0;
}
 
table.event_cont_tbl th{
	text-align: left;
	padding: 10px;
  border:1px solid #999;
  background: #D8E8EF;
}
 
table.event_cont_tbl td{
	padding: 10px;
  border:1px solid #999;
  background:#ffffff;
}

.stylemozi{
	color: #FF0000;
	font-weight: bold;
}

.event_heading{
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
	padding: 1.6rem 2rem 1.2rem 2rem;
	color: #fff;
	background-image: linear-gradient(to right, #dd0c0c 0%, #f269d0 100%);
	margin: 10px 0 30px 0;
	border-radius: 30px 0px;
}

.event-photo-row {
    display: flex;
    justify-content: center;
    margin-top: 20px;
	margin-bottom: 35px;
}

.event-photo {
	margin: 0 20px;
}

.event-photo img{
	max-width: 500px;
	width: 100%;
}


:root {
    --event-accent-color: #D5CEBB;
}

.event_title {
    position: relative;
    padding: 2.2rem 1rem 2rem 2rem;
    background: linear-gradient(0deg, transparent 0 10%, #D8E8EF 0 90%, transparent 90%),
        repeating-linear-gradient(-45deg, #91c2d7 0 6px, #d5dfe3 6px 12px);
    font-weight: bold;
    font-size: 2.6rem;
    text-align: left;
}
	
.iframe-wrapper {
  position: relative;
  padding-bottom: 380px;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
	
@media screen and (max-width: 700px) {

table {
    width: 100%;
    padding: 0;
    margin: 0;
}

.event-photo-row {
    flex-wrap: wrap;
    margin-top: 20px;
}

.event-photo {
    margin: 0 0 20px 0;
}

table.event_tbl .width100{
    width: 100%;
}

table.event_tbl .url{
    word-break: break-all;
}

}

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

.iframe-wrapper {
    padding-bottom: 740px;
}
}

.yearly_hd {
	display: inline-block;
	background-color: #666633;
	padding: 3px 8px 2px 8px;
	font-size: 1.2rem;
	color: #FFF;
	margin: 3px 5px 0px 0px;
	border-radius: 4px;
	box-shadow: 0px 0px 5px #CCC;
	background-size: 100% 100%;
	float: left;
}

.yearly_day {
	padding: 3px 8px 2px 8px;
  font-size: 1.8rem;
  margin: 0px 5px 0px 0px;
  background-size: 100% 100%;
  float: left;
}

.yearly_text{
	font-size: 1.6rem;
	line-height: 180%;
	letter-spacing: 2px
}

.ttl_line {
	color: #666633;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 3rem;
  font-weight: bold;
  border-left: 5px solid #666633;
  border-bottom: 1px solid #B4B4B4;
	margin: 5px 0 5px 0;
  padding: 0em 0 0.2em 0.5em;
}

.ttl_line_text_red {
	color: #EF0003;
}

	/*===========================================
    	ザ・たがかんこう
	===========================================*/
/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 2em auto;
    max-width: 1100px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.card-link {
	display: flex;
	flex-direction: column;
    text-decoration: none;
	flex: 1 0 auto;
	background: #e5dcd1;
	transition: all 0.5s;
}

a:hover.card-link {
    transform: scale(1.03);
	background: #FFF2C8;
}


/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
	margin: 25px auto 0 auto;
}

.card-figure {
    margin: 0;
    padding: 0;
}

/* カードレイアウトのタイトル部分 */
.card-title {
    margin: 0.6em 0 0;
    color: #333;
    text-align: center;
	font-size: 1.6em;
 	padding: 0 10px;
}

/* カードレイアウトの説明文部分 */
.card-text {
    margin-top: auto;
    padding: 0.5em 1em 1em 1em;
    color: #333333;
	text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* カードレイアウトを1カラムで配置 */
.card-list {
    margin: 0.5em auto;
    padding: 0;
    width: 100%;
	border: 3px solid #dbd0bf;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
}

/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 768px) {
    .card-list {
        margin: 0.5em 0;
        width: calc(98% / 2); /* 100%幅を2で割るという指定 */
    }
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
    .card-list {
        width: calc(94% / 4); /* 100%幅を3で割るという指定 */
    }
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #cardlayout-wrap::after{
        content: "";
        display: block;
        width: calc(94% / 4);
    }
}

	/*===========================================
    	ささゆりむすめの紹介
	===========================================*/
.sasayuri-photo-row {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.sasayuri-photo {
	margin: 0 20px;
}

.sasayuri-photo img{
	max-width: 500px;
	width: 100%;
}

	
	.sasayuri_midashi{
		color: #F72192;
		text-align: center;
		font-size: 2.6rem;
		font-weight: bold;
		margin: 25px 0 0 0;
	}
	
.sasayuri_name_box{
	width: 475px;
	margin: 30px auto 0 auto;
	display: flex;
align-items: center;
}

	.sasayuri_name{
		font-size: 3rem;
		margin: 0 0 0 10px;
	}

.sasayuti_cover{
	text-align: center;
	margin: 5px 0 20px 0;
}

.sasayuri_tbl_box{
	max-width: 1000px;
	margin: 10px auto;
}

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

table {
    width: 100%;
    padding: 0;
    margin: 0;
}

.sasayuri-photo-row {
    flex-wrap: wrap;
    margin-top: 20px;
}

.sasayuri-photo {
    margin: 0 0 20px 0;
}

	.sasayuri_midashi{
		color: #F72192;
		text-align: center;
		font-size: 2rem;
		font-weight: bold;
	}
	
.sasayuri_name_box{
	width: 100%;
	margin: 30px auto 0 auto;
	display: block;
}
	
	.sasayuri_name{
		font-size: 3rem;
		text-align: center;
	}

	}


	/*===========================================
    	リンク
	===========================================*/
/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#link-cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 2em auto;
    /*max-width: 1100px;*/
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.link-card-link {
	display: flex;
	flex-direction: column;
    text-decoration: none;
	flex: 1 0 auto;
	background: #fff;
	transition: all 0.5s;
}

a:hover.link-card-link {
    transform: scale(1.03);
	background: #FFF2C8;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
#link-cardlayout-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
	margin: 25px auto 0 auto;
}

.link-card-figure {
    margin: 0;
    padding: 0;
}

/* カードレイアウトのタイトル部分 */
.link-card-title {
    margin: 0.6em 0 0 0.2em;
    color: #333;
    text-align: left;
	font-size: 1.4em;
 	padding: 0 10px;
}

/* カードレイアウトの説明文部分 */
.link-card-text {
    margin: 0;
    padding: 0.5em 0.1em 0 1em;
    color: #333333;
	text-align: left;
    word-wrap: break-word;
}

.link-card-tel {
    margin-top: auto;
    padding: 0em 0em 0.8em 1em;
    color: #333333;
	text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* カードレイアウトを1カラムで配置 */
.link-card-list {
    margin: 0.5em auto;
    padding: 0;
    width: 100%;
	border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
}

/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 768px) {
    .link-card-list {
        margin: 0.5em 0;
        width: calc(98% / 2); /* 100%幅を2で割るという指定 */
    }
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
    .link-card-list {
        width: calc(98% / 3); /* 100%幅を3で割るという指定 */
    }
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #link-cardlayout-wrap::after{
        content: "";
        display: block;
        width: calc(98% / 3);
    }
}

	/*===========================================
    	各種ダウンロード
	===========================================*/
:root {
    --panf-accent-color: #b5ddb3;
}


.panf_title {
    position: relative;
    padding: 2.2rem 1rem 2rem 2rem;
	background: linear-gradient(0deg, transparent 0 10%, var(--panf-accent-color) 0 90%, transparent 90%),
        repeating-linear-gradient(-45deg, #333 0 6px, var(--panf-accent-color) 6px 12px);
    font-weight: bold;
    font-size: 2.6rem;
    text-align: left;
}

table.tbl-panf {
	width:100%;
	margin:0 auto 60px auto;
	border-collapse:collapse;
}

table.tbl-panf td, table.tbl-panf th {
	line-height: 180%;
	border-top:1px solid #ccc;
	padding:20px 10px 10px 10px;
	vertical-align: top;
}

table.tbl-panf:last-child tr {
	border-bottom:1px solid #ccc;
}

table.tbl-panf th {
	color: #333;
	width:20%;
	font-weight:bold;
	background:#fff;
	text-align:center;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
table.tbl-panf {
	margin:0 auto 30px auto;
}

table.tbl-panf th, table.tbl-panf td {
	width:auto;
	display:block;
}
table.tbl-panf th {
	margin-top:5px;
	border-bottom:0;
}
}


	/*===========================================
    	多賀八景フォトコンテスト
	===========================================*/
table.photo_contest_tbl td{
    text-align: center;
    height: auto;
}

.taga_hakkei_year{
	color: #fff;
	font-size: 3rem;
	margin: 50px 0 0 0;
	padding: 14px 0 8px 0;
	background: #333;
}

@media screen and (max-width: 700px) {
    table.photo_contest_tbl td{
        height: auto;
    }

    table.photo_contest_tbl td.photo_box{
        width: 50%;
    }

    table.photo_contest_tbl tr.photo_row{
        display: flex;
        flex-wrap: wrap;
    }

    table.photo_contest_tbl td.photo_box img{
        width: 100%;
        height: auto;
    }
}

	/*===========================================
    	多賀観光案内所
	===========================================*/
.annaijyo-photo-row {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.annaijyo-photo {
	margin: 0 20px;
}

.annaijyo-photo img{
	max-width: 500px;
	width: 100%;
}

.annai_text {
    font-size: 2.7rem;
    color: #66CCFF;
    font-weight: bold;
    line-height: 150%;
    margin-top: auto;
    padding: 0.5em 1em 1em;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.annai_midashi{
    font-size: 3.2rem;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    padding: 20px 0px;
    background-color: #FF6699;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.annai_midashi2{
    font-size: 3.2rem;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    padding: 20px 0px;
    background-color: #505567;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.annai_text2 {
    font-size: 3rem;
    color: #000000;
    font-weight: bold;
    line-height: 150%;
    text-align: center;
    margin-top: auto;
    padding: 0.5em 1em 1em;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


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

table {
    width: 100%;
    padding: 0;
    margin: 0;
}

.annaijyo-photo-row {
    flex-wrap: wrap;
    margin-top: 20px;
}

.annaijyo-photo {
    margin: 0 0 20px 0;
}

table.annaijyo_tbl img{
    width: 100%;
}

tr.annaijyo_row{
    display: flex;
    flex-wrap: wrap;
}

}