@charset "utf-8";

:root {
  --colorBlack: #021524;
  --colorBrown: #634904;
  --color-men: #034AA6; /* 男性カラー */
  --color-women: #E50053; /* 女性カラー */
}

/* --------------------------------------------
    l-main内の表示順変更
-------------------------------------------- */
.l-main{
  display: flex;
  flex-direction: column;
}

@media (max-width: 1023px) {
  .l-main nav{
    order: 999;
  }
}

/* --------------------------------------------
    リード文
-------------------------------------------- */
.l-main .mdl-read{
  max-width:1080px;
  padding:40px 15px 40px 15px;
  margin:0 auto;
  font-size:16px;
  text-align: center;
}

@media (max-width: 1023px) {
  .l-main .mdl-read{
    padding:36px 15px 36px 15px;
    font-size:14px;
    text-align: left;
  }
}

/* --------------------------------------------
    成婚ストーリー　一覧
-------------------------------------------- */
.marriage_story_list{
    max-width:1080px;
    margin:0 auto 40px auto;
    background-color: #F7F7F6;
    padding:34px 24px 24px 24px;
}
@media (max-width: 1023px) {
  .marriage_story_list{
    margin:0 auto 36px auto;
  }
}

.marriage_story_list ul.marriage_story_item{
    width:100%;
    flex-shrink: 0;
    list-style-type: none;
    margin:0;
    padding:0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 34px 24px;
}

.marriage_story_list ul.marriage_story_item li{
  list-style-type: none;
  width:calc(100% / 2 - 12px) ;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  list-style-type: none;
  margin:0;
  padding:0;
}

@media (max-width: 1023px) {
  .marriage_story_list{
      flex-direction: column;
  }
  .marriage_story_list ul.marriage_story_item {
    width:100%;
    flex-direction: column;
  }
  .marriage_story_list ul.marriage_story_item li{
    width:100%;
  }
}

.marriage_story_list ul.marriage_story_item li a{
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.marriage_story_list ul.marriage_story_item .men a{
    border: 1px solid var(--color-men);
}

.marriage_story_list ul.marriage_story_item .women a{
    border: 1px solid var(--color-women);
}

.marriage_story_list .marriage_story_item a:hover {
  opacity: 0.7;
  cursor: pointer;
}

.marriage_story_list .marriage_story_item .fukidashi {
  color: #fff;
  font-weight: 700;
  line-height:1.2em;
  width: fit-content;
  max-width: calc(100% - 36px);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 8px;
  position: relative;
  margin:-17px 0 0 10px;
}

@media (max-width: 1023px) {
  .marriage_story_list .marriage_story_item .fukidashi {
    max-width: calc(100% - 26px);
    font-size:12px;
    margin-left: 5px;
  }
}

.marriage_story_list .marriage_story_item .men a .fukidashi{
    background-color: var(--color-men);
}

.marriage_story_list .marriage_story_item .women .fukidashi {
    background-color: var(--color-women);
}

.marriage_story_list .marriage_story_item .fukidashi::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 32px;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-width: 10px 10px 0 10px;
}
@media (max-width: 1023px) {
  .marriage_story_list .marriage_story_item .fukidashi::after {
    left: 26px;
  }
}

.marriage_story_list .marriage_story_item .men .fukidashi::after{
     border-color: var(--color-men) transparent transparent transparent;
}

.marriage_story_list .marriage_story_item .women .fukidashi::after{
     border-color: var(--color-women) transparent transparent transparent;
}

.marriage_story_list .marriage_story_item .item-content {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: var(--colorBlack);
}

.item-content .item-main {
  display: flex;
  padding:11px 20px 10px 20px;
  position:relative;
}

.item-content  p{
  font-size:16px;
  margin:0;
}
@media (max-width: 1023px) {
  .item-content  p{
    font-size:14px;
  }
}

.item-content .avatar {
  width:60px;
  height:60px;
  display: flex;
  align-items: center;
  border-radius:50%;
  overflow: hidden;
  border:1px solid #D4D4D4;
}
@media (max-width: 1023px) {
  .item-content .avatar {
    width:40px;
    height:40px;
  }
}

.item-content .avatar img{
  width: 100%;
  margin-bottom:0;
}

.item-content .speech-bubble {
  flex:1;
  padding: 0 10px;
}

.item-content .prof_name {
  font-weight: 700;
  font-size: 20px;
  line-height:1em;
}
@media (max-width: 1023px) {
  .item-content .prof_name {
    font-size:16px;
  }
}

.item-content .keywor{
  margin-top:2px;
}

.item-content .keyword span {
  display: inline-block;
  font-size: 12px;
  line-height:1em;
  color: var(--colorBrown);
  border: 1px solid var(--colorBrown);
  border-radius: 14px;
  margin-bottom: 2px;
  margin-right: 4px;
  padding: 4px 8px 3px 8px;
}

@media (max-width: 1023px) {
  .item-content .keyword span {
    font-size: 10px;
    padding: 2px 4px;
  }
}

.item-content .tag {
  margin-top:5px;
  font-size: 12px;
  line-height:1em;
  color: var(--colorBrown);
}
.item-content .tag span {
  margin-bottom: 2px;
  margin-right: 10px;
}
@media (max-width: 1023px) {
.item-content .tag {
  font-size:10px;
}
}

.item-content .read {
  display: flex;
  align-items: center;
}

.item-content .read span{
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height:1em;
  color: #fff;
  background: linear-gradient(135deg, #BE9B3E, #634904);
  padding: 9px 8px 10px 12px;
  border-radius: 5px;
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
}

@media (max-width: 1023px) {
  .item-content .read span{
    font-size:10px;
    padding: 5px 5px 5px 8px;
  }
}

.item-content .read span img{
  margin:1px 0 0 4px;
  width:6px;
  height:auto;
}

.item-content .item-story-list{
  border-top:1px dotted var(--colorBrown);
  padding:16px 20px;
}
.item-content .item-story-list dl{
  display: flex;
  flex-direction: column;
  margin:0;
  font-size:16px;
  line-height:1.3em;
}

.item-content .item-story-list dl dt{
  font-weight: 700;
  position: relative;
  height:auto;
  padding:0 0 4px 18px;
  width:calc(100% - 18px);
}

@media (max-width: 1023px) {
  .item-content .item-story-list dl dt{
    font-size:14px;
  }
}

.item-content .item-story-list dl dt::before {
    content: "";
    position: absolute;
    top:5px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(190deg, #CFB673, #A98521);
}

.marriage_story_item .men .item-content .item-story-list dl dt{
  color:var(--color-men);
}

.marriage_story_item .women .item-content .item-story-list dl dt{
  color: var(--color-women);
}

.item-content .item-story-list dl dd{
  margin:0;
  padding:0 0 16px 18px;
  width:calc(100% - 18px);
}

@media (max-width: 1023px) {
  .item-content .item-story-list dl dd{
    font-size:14px;
  }
}

.item-content .item-story-list dl dd:last-of-type{
  padding-bottom:0;
}

.marriage_story_list .marriage_story_item a:hover .item-story-list dl dd{
  color:var(--colorBlack);
}